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