vue之数组与对象的检测与更新

目录

说明

MVVM会自动检测变量的变化，当变量改变，页面也会对应的变化，但是有一点需要注意，如果有一个对象增加值的时候，不能直接修改，需要使用Vue.set()方法

语法

Vue.set(this.变量, 键, 值)

示例

<body>
<div id="app">
    <div v-for="(value, key) in d1">
        <h1>key是：{{key}}，value是：{{value}}</h1>
        <h1></h1>
    </div>
    // 点击按钮后，添加hobby: game键值对
    <button @click="clickBtn">点我添加数据</button>
</div>
</body>
<script>
    vm = new Vue({
        el: '#app',
        data: {
            d1: {name: 'zzz', age: 10}
        },
        methods: {
            clickBtn() {
                this.d1['hobby'] = 'game'
            }
        }
    })
</script>

如下图可以看到，值有了，但是页面没有变化，这时候就需要使用set方法
image

<script>
    vm = new Vue({
        el: '#app',
        data: {
            d1: {name: 'zzz', age: 10}
        },
        methods: {
            clickBtn() {
                // 对于页面未监控到变化的情况，都需要使用Vue.set()方法
                Vue.set(this.d1, 'hobby', 'game')
            }
        }
    })
</script>

image

posted @ 2023-04-06 16:06  树苗叶子  阅读(76)  评论(0)    收藏  举报