vue点击当前元素添加class 删除兄弟元素的class

在vue中当我们要实现点击元素动态添加类名时，我们不能像JQ那样去用（xxx.addClass(‘class’).siblings().removeClass(‘class’)）实现，那我们应该怎样去做呢

解决方案：

1.在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）

2.在当前元素中添加动态class： “:class”，使用v-bind进行绑定

3.给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性，这样就可以点击实现该效果

一.首先给想要添加class的元素，通过v-bind绑定一个class

二.在data中声明一个变量activeClass

三.在点击事件中

四.在style里面写想要的样式就可以了

Vue 中提供了14个比较常用的指令，如

1.v-model ：双向数据绑定，

表单元素常用 input select radio checkbox textarea 等，v-model有三个修饰符，例如input元素 v-model.trim去掉输入值的前后空格和v-model.number，将输入的字符串转换为number,v-model.lazy 输入的数据不再实时更新，而是数据失去焦点的时候再更新输入的数据

2.v-show： 元素的显示和隐藏，

频繁 *** 作元素的显示和隐藏，就用v-show ,原理是 *** 作的dom 的css样式 display的值是true还是false

3.v-if：

元素的显示和隐藏，原理是，是否创建元素的dom,例如表格中某条数据是否显示编辑，删除按钮，由后台传的数据解决的，这种不频繁 *** 作的情况可用v-if，v-if 可以加入template标签中判断 v-show 不可以

4.v-else ： 和v-if 搭配使用

5.v-else-if ：条件满足v-if ？

不满足判断v-else-if 如果还不满足直接走v-else 这个的使用方式和我们的js 中的 if ，else if() ，else 是类似的使用方式

6.v-bind： 绑定

v-bind:class v-bind:style v-bind:attribute v-bind可以省略成：最后写成 ：class :style :attribute

7.v-on ：绑定常用事件

下面的常用事件去掉on 改为@click：点击某个对象时触发@clickondblclick：双击某个对象时触发@dblclickonmouseover：鼠标移入某个元素时触发@mouseoveronmouseout：鼠标移出某个元素时触发@mouseoutonmouseenter：鼠标进入某个元素时触发@onmouseenter

8.v-for：项目中常用循环数组的指令。

9.v-html ：将字符串html 转换为结构显示，

项目中基本不这种方式去处理，涉及到安全性问题

10.v-text：防止为了{{}} 闪烁问题 项目不常用

11.v-once： 指令指的是元素仅仅绑定一次，只是渲染一次

12.v-cloak：指的是cloak 等元素编译结束以后才会显示dom

13.v-pre :跳过当前元素及子元素的编译过程，先进行编译

14.v-slot：插槽

---