Vue中Vue.set()的使用介绍
基本方法介绍Vue.set(vm.items, indexOfItem, newValue)vm.items :代表源数据indexOfItem : 代表要修改的数据的键newValue : 代表要修改的数据的新值实际例子修改李四的age 为 19 ,如果直接修改,vue是获取不到的,就需要借助 $set 来手动触发改变源数据:let a = [{name:'张三',age:'20',sex:1}
·
基本方法介绍
使用vue的set()方法可以实现改变数据并立刻将新数据渲染在网页上的目的(响应式)。该方法可以应用于数组和对象类型
Vue.set(vm.items, indexOfItem, newValue)
- vm.items :代表源数据
- indexOfItem : 代表要修改的数据的键
- newValue : 代表要修改的数据的新值
使用方式
// 方式一
Vue.set(源数据,要修改的键,新值)
// 方式二:使用this或vm的Vue实例对象
vm.$set(源数据,要修改的键,新值)
实际例子
修改李四的 age 为 19 ,如果直接修改,vue是获取不到的,需要借助 $set 来手动触发改变
1)源数据:
let a = [
{name:'张三',age:'20',sex:1},
{name:'李四',age:'21',sex:0},
{name:'王五',age:'22',sex:1},
]
2)要修改的数据的键:
//a数组的下标
1
3)要修改的数据的新值(修改后的数据):
a[1].age = 19
4)使用set:
Vue.set(a,1,a[1]) //修改了对象的属性值
Vue.forceUpdate() //也可以用这个方法手动触发视图更改
更多推荐
已为社区贡献15条内容
所有评论(0)