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 兔咂阅读(3984) 评论(0) 编辑收藏举报

兔咂

Vue实现点击li变色

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜