Vue修改数组对象的更新问题

2017-08-25 | 5,811浏览 | 0评论 | 标签:vue

Vue修改数组对象的更新问题

在Vue中,对变量(数组对象)进行修改,有时并不会立即渲染在模板中,但打印发现变量确实已被修改。此时需要注意修改的方式,现总结备忘。

官方说明:https://cn.vuejs.org/v2/guide/reactivity.html

demo:


<style>
.main span{
    color: red;
}
</style>

<div id="app" class="main">
    <h3>修改代码后,点击运行预览效果:</h3>
    <p>obj:<span>{{obj}}</span></p>
    <p>arr: <span>{{arr}}</span></p>
</div>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data() {
        return {
            obj: {},
            arr: []
        }
    },
    mounted() {
        /*
         * Object
         */

        // this.obj.name='DH';  // x

        // delete this.obj.name;  // x

        // this.obj={name:'DH'}; // √

        // this.obj = Object.assign({}, this.obj, {name: 'DH'});  // √

        // this.$set(this.obj,'name','DH');   // √

        /*
         * Array
         */

        // this.arr[0]='a';    // x

        // this.arr.length=0;    // x

        // this.$set(this.arr,0,'a');   // √

        // this.arr.push('a');    // √
        // 同shift、unshift、pop、splice、slice、concat...
    }
});
</script>

(本篇完。有疑问欢迎留言探讨)

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出