一开始改变li的class时时直接利用数组名[index]进行修改,然后一点反应都没有,后来才知道这种利用下标修改数组元素的方式Vue是不能响应式更新的,后来改成了函数方法就成了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active {
color: aqua;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(m, index) in movies" >
<!-- 1.使用v-bind对象语法,因为控制的class属性只有一个,可以直接赋值-->
<h2 :class="{active:isRed[index]}" @click="taggleIsRed(index)">{{index}}.{{m}}</h2>
<!-- 多个class可以使用数组语法,让代码更简洁-->
<!-- <h2 :class="getClasses(index)" @click="taggleIsRed(index)">-->{{index}}.{{m}}</h2>
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
movies: ['星际穿越', '钢铁侠', '复仇者联盟', '神奇女侠'],
isRed: [true,true,true,true]
},
methods: {
taggleIsRed(index){
// 1.方法一
// const rev = !this.isRed[index]
// this.isRed.splice(index,1,rev)
// 2.方法二,省掉一个变量空间
Vue.set(this.isRed,index,!this.isRed[index])
},
getClasses(index){
return {active: this.isRed[index]}
}
}
})
</script>
</body>
</html>