Vue中,给当前元素添加类名移除兄弟元素类名的方法

时间:2022-05-01 06:52:48

在Vue中,给当前元素添加类名移除兄弟元素类名的方法

  • 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接想到了这个办法。

  • 但是出于未知的原因,jQuery获取不到v-for出来的数据,根本找不到dom节点,所以不得不改变思路。

  • 然后我想到了V-bind的方法。下面贴上步骤。

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

 current: '0', 如果不想默认被选中,就把值设为一个超出所有元素length的数字

  • 2.在当前元素中添加动态class: “:class”,根据vue的class和style的绑定特性写出类似“v-bind:class="{ classred:index==current}"”,当然其他方法很多,可以根据文档自行选择
<ul class="list">
<li v-for="(item,index) in list" :key="index" @click="handleList(index)" :class="{red:index==current}">{{item.name}}</li>
‘red’是你要给的类名
</ul>
  • 3.给元素点击事件,传入当前元素的index,把元素当前的index赋值给data里面的申明的属性
 handleList (index) {
this.current = index;
},

大功告成!

-这样就可以点击实现类似于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:'哈哈'},
27. {title:'阿昂'},
28. {title:'呜呜'},
29. {title:'来啦'}
30. ]
31. },
32. methods:{
33. addClass:function(index){
34. this.current=index;
35. }
36. },
37. mounted: function() {}
38. })
39. </script>
40. </body>
</html>