Vue点击切换class

1 <style>
2     .active{
3         color: red;
4     }
5 </style>

1 <ul id="app">  
2     <li v-for='(item,index) in items' @click="change(index)" :class='{active:index===number}'> <!--通过切换索引值改变class-->
3     　　<span v-html="item.name"></span>
4     </li>  
5 </ul> 

 1 <script>  
 2     new Vue({  
 3         el: '#app',  
 4         data: {
 5             number: 0,
 6         items:[
 7         {
 8             name: "我是0",
 9         },
10         {
11             name: "我是1"
12         },
13         {
14             name: "我是2"
15             }
16         ]
17         },  
18         methods: {
19             change: function(index) {  
20                 this.number= index;  
21         }  
22     }  
23 })  
24 </script>  

 

转载于:https://www.cnblogs.com/xueweijie/p/6861702.html