vue.set()用法

奇闻趣事 2022-09-17 07:13生活趣事www.qiwenkd.com

vue.set()用法是什么呢?不知道的小伙伴来看看小编今天的分享吧!

1、vue.set()基本方法介绍

使用vue的set()方法可以实现改变数据并立刻将新数据渲染在网页上的目的(响应式)。该方法可以应用于数组和对象类型

Vue.set(vm.items, indexOfItem, newValue)1
  • vm.items :代表源数据

  • indexOfItem : 代表要修改的数据的键

  • newValue : 代表要修改的数据的新值

2、使用方式

// 方式一
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},
]12345

2)要修改的数据的键:

//a数组的下标
112

3)要修改的数据的新值(修改后的数据):

a[1].age = 191

4)使用set:

Vue.set(a,1,a[1]) //修改了对象的属性值
Vue.forceUpdate() //也可以用这个方法手动触发视图更改

上一篇:python中def函数的用法 下一篇:js setattribute

Copyright © 2014-2022 www.qiwenkd.com.奇闻网 版权所有

奇闻异事,飞碟,ufo,奇闻趣事,奇闻怪事,灵异事件,灵异故事,考古发现,恐怖事件,世界奇闻,宇宙奥秘,未解之谜,