这里我定义了一个列表数据,将借助三个不同的按钮来改变列表的数据。
调用方法:Vue.set(target,key,value)
说一下target/key/value分别代表的意思。
target: 要更改的数据源【可以是对象,也可是数组】。
key:要更改的具体数据。
value:重新赋的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <div v-for="item of list" :key="item.id"> {{item.msg}} </div> <button @click="btnClick1">动态赋值</button><br> <button @click="btnClick2">为data新增属性</button> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { list: [ {msg: 'Test one', id: '1'}, {msg: 'Test two', id: '2'}, {msg: 'Test three', id: '3'} ] }, methods: { btnClick1(){ Vue.set(this.list,0,{msg: 'Test change', id: '666'}) }, btnClick2(){ var listLen = this.list.length; Vue.set(this.list,listLen,{msg:'Test add',id: listLen}) } } }) </script> </body> </html>
这时候页面显示是这样的:
点击第一个按钮,起到的效果是,将Test one改成Test change。
关于btnClick1函数的写法,要注意一下。不要写成this.list[0] = {msg: 'Test change',id: '666'},这样是起不到效果的,不信的话可以试一试。
如果真是这样做的话,会出现一个状况。点击“动态赋值”这个按钮后你在控制台里查看list[0]发现这个数据已经被更改了,但是,从视图上是看不到改变的。
Vue文档对于这个问题是有做说明的,由于JavaScript的限制,Vue不能够检测出数据的改变。所以当我们需要动态改变数据的时候,用Vue.set()吧。
接下来,我再说一下“为data新增属性”那个按钮吧。
点一下这个按钮之前,数组里是三个对象,点了之后,会发现新增了一个对象。
我们不难发现,Vue.set()不单可以修改数据,还可以添加数据呢!