vue 动态绑定class类（给当前元素添加类名其他兄弟元素移除类名）
程序员文章站
2022-06-20 10:54:27
...
在vue中当我们要实现点击元素动态添加类名时，我们不能像JQ那样去用（xxx.addClass('class').siblings().removeClass('class')）实现，那我们应该怎样去做呢
解决方案：
1.在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）
2.在当前元素中添加动态class： “:class”，根据vue的class和style的绑定特性写出类似“v-bind:class="{ classred:index==current}"”，当然其他方法很多，可以根据文档自行选择
3.给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性
这样就可以点击实现类似于jQuery的 xxx.addClass('class').siblings().removeClass('class')的效果了
具体代码如下：
<!DOCTYPE html>
2. <html>
3. <head>
4. <title>Vue如何加class</title>
5. <meta charset="utf-8"/>
6. <style type="text/css">
7. .classred{
8. color:red;
9. }
10. </style>
11. </head>
12. <body>
13. <div id="app">
14. <ul class="list">
15. <li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{ classred:index==current}">{{item.title}}</li>
16. </ul>
17. </div>
18. <script src="./vue.min.js"></script>
19. <script type="text/javascript">
20. var vm = new Vue({
21. el: '#app',
22. data: {
23. name:'赵刚',
24. current:0,
25. liList:[
26. {title:'双手爆扣搂裤衩1'},
27. {title:'双手爆扣搂裤衩2'},
28. {title:'双手爆扣搂裤衩3'},
29. {title:'双手爆扣搂裤衩4'}
30. ]
31. },
32. methods:{
33. addClass:function(index){
34. this.current=index;
35. }
36. },
37. mounted: function() {}
38. })
39. </script>
40. </body>
</html>
上一篇： vue添加无数个输入框
下一篇： 中医强烈推荐！三伏天吃这些瓜最解暑