vue.set()用法

来源：动视网责编：李赢赢时间：2022-01-22 16:51:40

1、vue.set（）基本方法介绍：使用vue的set()方法可以实现改变数据并立刻将新数据渲染在网页上的目的（响应式）。2、使用方式，方式一：Vue.set（源数据，要修改的键，新值）。方式二：使用this或vm的Vue实例对象，vm.$set（源数据，要修改的键，新值）。

推荐度：

点击下载本文 文档为doc格式

导读1、vue.set（）基本方法介绍：使用vue的set()方法可以实现改变数据并立刻将新数据渲染在网页上的目的（响应式）。2、使用方式，方式一：Vue.set（源数据，要修改的键，新值）。方式二：使用this或vm的Vue实例对象，vm.$set（源数据，要修改的键，新值）。

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

1、vue.set（）基本方法介绍

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

Vue.set(vm.items, indexOfItem, newValue)1

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() //也可以用这个方法手动触发视图更改

以上就是小编今天的分享了，希望可以帮助到大家。

推荐度：

点击下载本文 文档为doc格式

标签： VUE set用法