嗯，模型做好了要放到平台上，开始嗑前端vue：看王元红老师的视频，第一次作业要求实现列表点击变色。代码如下
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src = "vue.js"></script>
<style>
.active{
color: red
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(m, index) in movies" @click="changeColor(index)" :class="{active: isActive[index]}">{{m}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
isActive: [true, false, false, false]
},
methods: {
changeColor: function(index){
console.log(index + "has changed to be true");
// this.isActive[index] = true; 通过索引修改数组值不是响应式的
this.isActive.splice(index, 1, true);
}
}
})
</script>
</body>
</html>
之前用this.isActive[index] 来修改数组值，页面上的字体一直不变色，但检查isActive的值又是变的，纠结了半天，才有大神点醒说通过索引修改数组值不是响应式的。特此mark