<!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