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>  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM