案例—点击电影列表中一项，该项文字变红
思想：
需要定义一个数组来存放电影列表；
movies: ['少年派', '匆匆那年', '夏洛特烦恼', '海王']
需要一个ul来显示电影列表；
ul要监听鼠标点击事件，要为事件处理函数传入当前点击的电影的索引，从而判断点击的是哪个电影。
定义一个currentIndex变量来表示当前显示为红色的电影索引，当index==currentIndex时，class生效，字体显示为红色；
//绑定class
:class="{active:currentIndex===index}"
//监听鼠标点击事件
@click="liClick(index)"
methods:{
liClick(index){
this.currentIndex=index
}
}
要为ul动态绑定一个class，当点击的class生效，从而字体显示为红色；
完整代码为：
<div id="app">
<!-- 把电影列表先显示出来，要获得当前点击的索引，要绑定点击事件-->
<ul>
<li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="liClick(index)">
{{item}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 存放电影列表的数组
movies: ['少年派', '匆匆那年', '夏洛特烦恼', '海王'],
currentIndex: 0
},
methods: {
liClick(index) {
this.currentIndex = index
}
}
})
</script>
