在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>