关于vue中数据驱动视图的一点小疑问,数据的变化更新不到页面中

<!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>
           // 
  • {{item}}
  • </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],
    关于vue中数据驱动视图的一点小疑问,数据的变化更新不到页面中_第1张图片
    本着数据驱动视图的思想,我想在data中更改isActive数组,来改变页面中某一个li是否被赋予active属性:

    :class='{active:isActive[index]}'
    

    所以我通过控制台修改isActive数组,但是页面并没有更新,如下:
    关于vue中数据驱动视图的一点小疑问,数据的变化更新不到页面中_第2张图片
    检查元素:
    关于vue中数据驱动视图的一点小疑问,数据的变化更新不到页面中_第3张图片
    发现data的修改,未反映到页面之中,希望对此了解的大佬,能指点一下。

    但是当在li中采用
    currentIndex === index?方式进行判断的时候,data中的currentIndex可以和页面中元素进行联动。


    追加:data中数组直接修改的方式无法响应到视图中,应该采用其他方式实现,
    感谢大佬分享:
    https://blog.csdn.net/lian_bingbing/article/details/98212125

    你可能感兴趣的:(前端开发)