vue2视频教程系列第三十一节—实例方法set的使用

vue2018-07-19.jpg

$set介绍：

$set(target, key, value)方法支持三个参数：

1. target: 目标对象，可以是数组，也可以是一个对象；

2. key: 键名。如果target是对象，那么key为键名；如果target是数组，那么key为要改变的索引；

3. value: 顾名思义，指的就是改变的数据。

Vm.$set()是Vue.set的别名

我们为什么要引入set这个方法呢？

因为Javascript的限制，Vue是不能检测以下变动的数组的：

1. 当利用索引直接设置一个项时

例如：this.names[1] = ‘小土豆’

2. 录修改数组的长度时

例如：this.names.length = 10

所以我们在改变数组里某一项或者改变数组的长度时，我们使用set方法，通知vue去更新。新修改的数据才会显示在页面上。

本节课我们的案例是，点击按钮后，将“小明”修改成“小土豆”

首先我们需要在DOM里如下编写：

<p v-for="item in list">{{ item.name }}</p>
<button class="button" @click="upd">提交</button>
Js里如下：

`data() {
return {
names: ['小红','小明','小亮'],
list: [
{
name: '小红1'
},
{
name: '小明1'
},
{
name: '小亮1'
}
]
}
},

methods: {
upd() {
this.$set(this.list[1], 'name', '小土豆')
}
}`
这里面要注意的一点是key,如果是数组，key为数组里的索引；如果是对象，那么key为键名，一定要记得键名是字符串，需要加上引号，切记切记。

就到这里了，休息休息一会儿吧：）

欢迎关注公号：duzhan99