set方法的使用

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

<script>
var vm = new Vue({
　　el:'#root',
　　data:{
　　　　userInfo:{
　　　　　　name:'Dell',
　　　　　　age:28,
　　　　　　gender:'male',
　　　　　　salary:'secret'
　　　　}
　　}
})
</script>

在v-for的深层用法中，我们是使用改变引用的方式，那么就这种方法吗，不是的，还有一种，用set方法

Vue.set(vm.userInfo,'address','beijing')

这样设置也可以

set除了使用全局方法，也可以使用实例方法

vm.$set(vm.userInfo,'address','beijing')

 

 

数组上的set方法怎么使用？

<div id='root'>
　　<div v-for='(item,index) of userInfo'>
　　　　{{item}}
　　</div>
</div>


<script>
var vm = new Vue({
　　el:'#root',
　　data:{
　　　　userInfo:[1,2,3,4]
　　}
})
</script>

直接改下标的形式没用

vm.userInfo[1] = 5

用set就可以解决这个问题

Vue.set(vm.userInfo,1,5)

同样，可以调用Vue对象上的这个set方法，同样可以使用vm实例上的这个方法$set

vm.$set(vm.userInfo,3,10)

这样改变数据就有三种方式了，其他两种，在v-for的深层用法里面

转载于:https://www.cnblogs.com/wzndkj/p/9638390.html