直接上代碼
利用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>