Vue实现点击li变色 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .active{
 8                 color: red;
 9             }
10         </style>
11     </head>
12     <body>
13         <ul id="change">
14             <li v-for="(m,index) in content" @click="doActive(index)" :class="{active:index==current}">{{m}}</li>
15         </ul>
16         <script src="../js/vue.js"></script>
17         <script>
18             let eg = new Vue({
19                 el:"#change",
20                 data:{
21                     current:0,
22                     content:['aaa','bbb','ccc','ddd','eee']
23                 },
24                 methods:{
25                     doActive:function(index){
26                         this.current = index;
27                     }
28                 }
29             })
30         </script>
31     </body>
32 </html>

 

每次点击时将当前被点击的li的索引串到doActive中

current 用于保存该索引

v-bind的对象语法  当index==current的时候会为当前li增加active的class

 

posted @ 2019-11-29 16:15  兔咂  阅读(3970)  评论(0)  编辑  收藏  举报