vue.js 赋值数组后,页面数据没有更新变化?代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE赋值数组值后,DOM数据没变化</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div v-for="(item,index) in arr">{{item}}</div>
    </div>

    <script>
        
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#demo',
            data:{
                arr:['张三','李四']
            }
        })

    </script>
</body>
</html>

控制台调试代码如下:

原因是因为vue框架不支持这种赋值的方式修改数组,必须使用如下方法修改才行:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

原理是vue.js二次封装了这几个原生的方法,方法既带有原生的功能,同时二次封装会进行数据代理以及修改DOM。记住了吧?这个很重要!

详细请参考官方文档:

https://v2.cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部