vue 实现点击哪个元素，元素变色

直接上代码

利用currentIndex来判断哪个元素被点击了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .active{
 8             color:red;
 9         }
10     </style>
11 </head>
12 <body>
13 <div id="app">
14     <ul>
15         <li v-bind:class="{active:currentIndex === index}"
16             v-for="(item,index) in movies" v-on:click="change(index)">{{item}}
17         </li>
18     </ul>
19 </div>
20 <script src="../../js/vue.js"></script>
21 <script>
22   const app = new Vue({
23     el:"#app",
24     data:{
25       movies:["海王","海尔兄弟","火警忍者",'进击的巨人'],
26       currentIndex:0
27     },
28     methods:{
29         change: function (index) {
30             console.log(this.currentIndex)
31             this.currentIndex=index
32         }
33 
34     }
35   })
36 </script>
37 </body>
38 </html>

 

posted @ 2019-12-05 11:12  方歌阙丶AAA  阅读(1626)  评论(0)    收藏  举报