需求：点击哪个电影就让其变红 关键点是在data里定义一个currentIndex来记录当前被点击电影的索引值，因为我们需要依据这个索引获取到当前被点击的元素并修改颜色。 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .active{ color: red; } </style> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="btnClick(index)">{{index}}----{{item}}</li> </ul> </div> <script src="./js/vue.js"></script> <script> const vm = new Vue({ el:'#app', data:{ movies:['云图','寄生虫','盗梦空间','阿凡达'], currentIndex:0, }, methods:{ btnClick(index){ this.currentIndex=index } } }) </script> </body> </html>chrome展示结果如下：
