vue中数据与页面间双向绑定需要注意的点

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_39025670/article/details/98391792

vue中，我们可以实现页面与数据的双向绑定，但这里需要注意一些细节。

1.更新数组类型的数据

比如，有如下数据

var vm = new Vue({
    el: '#app',
    data: {
        list: [
            'a',
            'b',
            'c'
        ]
    }
})

html页面

<div id="app">
    <div v-for="item of list">{{item}}</div>
</div>

假设，我们要往list中增加数据“d”，直接这样写是不行的 vm.list[3] = 'd' ；同理，我们若要将“b”改为“bb”，这么写也是不行的 vm.list[1] = 'bb' 。但我们同时发现数据是变化了的，只是页面没有更新而已。

那我们要怎么才能实现数据改变页面也跟着变化的效果呢？

（1）更改引用

 vm.list = ['a','b','c','d']

（2）使用数组的变异方式 

• pop，删除并返回数组的最后一个元素
• push，向数组的末尾添加一个或多个元素，并返回新的长度
• shift，删除并返回数组的第一个元素
• unshift，向数组的开头添加一个或多个元素，并返回新的长度
• splice，删除元素，并向数组添加新元素
• sort，对数组的元素进行排序
• reverse，颠倒数组中元素的顺序

以上7中方式都可以实现数组的双向更新，这里我们只需执行 vm.list.push('d') 

（3）vue中的set方法

 vm.$set(vm.list, 3, 'd')

参数代表数据，索引，元素项

2.更新对象类型的数据 

如下

var vm = new Vue({
    el: '#app',
    data: {
        userInfo: {
            name: 'cai',
            age: '22'
        }
    }
})

html页面

<div id="app">
    <div v-for="(item, key, index) of userInfo">{{item}}</div>
</div>

假如我们要实现数据与页面的双向更新，有两种方法

（1）更改引用

 vm.userInfo = {name: 'cai', age: '22', gender: 'male'}

（2） set方法

 vm.$set(vm.userInfo, 'gender', 'male')

参数代表数据，key，value