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

最新推荐文章于 2024-05-13 11:54:42 发布

超宝宝很乖

最新推荐文章于 2024-05-13 11:54:42 发布

阅读量503

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_43311389/article/details/102876257

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

超宝宝很乖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
关于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-...
复制链接

扫一扫