要求：在data中有一个保存了电影名字的数组，将其通过v-for显示到页面上并添加点击事件，第一个电影名字默认为红色，当点击某一个电影时将它的字体变为红色，其他变回黑色。
text 代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul>
<a href="" onclick="return false">
<li v-for="(item,index) in movies" @click="change(index)" :class="{active:index===cindex}">{{item}}</li>
</a>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const test = new Vue({
el:".app",
data:{
movies:["环太平洋","海王","变形金刚","钢铁侠"],
cindex:0
},
methods:{
change:function(index){
this.cindex = index
},
}
})
</script>
</body>
</html>
- 通过v-for将电影显示在列表中，其中item为电影名子，index为它们在数组中的索引。
- 通过对象语法为class绑定active，绑定条件是index===cindex。
- 为每个li添加点击事件change并将index作为参数。
遍历玩成后页面元素为
请输入图片描述
默认情况下因为cindex等于0，所以运行时只有索引为0的电影也就是第一个电影环太平洋的active值为true。
当点击某个电影时，它所绑定的change方法会将cindex修改为它的索引值index。
假设点击海王，事件触发，此时cindex的值将被修改为1，海王的active值为true，其他电影的active值为false。
本站由
