<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<script src='../js/vue.js'></script>
<title>Document</title>
<style>
.active {
color: blue;
background-color: pink;
}
</style>
</head>
<body>
<div id='app'>
<ul>
<li v-for="(item, index) in movies" :key="index" @click='btnClick(index)' :class='{active:isActive[index]}'>{{item}}</li>
// <li v-for="(item, index) in movies" :key="index" @click='btnClick(index)' :class='{active:currentIndex === index}'>{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
movies: ['海王', '海尔兄弟', '进击的巨人', '火影忍者'],
isActive:[false,true,false,false],
currentIndex: 0
},
methods: {
btnClick(index) {
this.currentIndex = index
}
},
components: {}
})
</script>
</body>
</html>
就像我代码中写的,我的意思是在四个li标签中,点击哪个标签,哪个就变色。再每一个标签中,是否被赋予active类,取决于data中的isActive数组。在页面第一次加载的时候,这几个标签能够按照预期显示颜色:
isActive:[false,true,false,false],
本着数据驱动视图的思想,我想在data中更改isActive数组,来改变页面中某一个li是否被赋予active属性:
:class='{active:isActive[index]}'
所以我通过控制台修改isActive数组,但是页面并没有更新,如下:
检查元素:
发现data的修改,未反映到页面之中,希望对此了解的大佬,能指点一下。
但是当在li中采用
currentIndex === index?方式进行判断的时候,data中的currentIndex可以和页面中元素进行联动。
追加:data中数组直接修改的方式无法响应到视图中,应该采用其他方式实现,
感谢大佬分享:
https://blog.csdn.net/lian_bingbing/article/details/98212125