Vue的set方法
通过set方法添加对象属性
var vm = new Vue({
el:"#app",
data:{
userInfo:{
name:"Dell",
age:28,
gender:"male",
salary:"secret"
}
}
})
Vue.set(vm.userInfo,"address","beijing")
// 或者通过Vue实例
vm.$set(vm.userInfo,"address","beijing")
数组中的使用
var vm = new Vue({
el:"#app",
data:{
userInfo:[1,2,3,4]
}
})
平时操作数组主要是使用数组的变异方法
- unshift:头插
- shift:头弹
- push:尾插
- pop:尾弹
- splice:删除或替换
- sort:按特定规律排序
- reverse:反转
非变异方法
-
filter:过滤数组中某些元素,返回符合条件的元素组成的新数组
-
concat:合并两个或两个以上的数组,可以链式调用,返回合并后的数组
-
slice:切割数组中某一段元素,返回一个切割出来的数组
-
map:使用map方法会产生一个新的数组,数组的每一项就是我们return出去的值(所以map方法必须有返回值,如果没有return,那么新数组的每一项都为undefined),数组的个数与原数组一样
-
some:会遍历数组中的每个元素,让每个值都执行一遍callback函数,如果有一个元素满足条件,返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
-
forEach:遍历数组
-
every:检测数组所有元素是否满足条件
由于js的限制,vue不能检测数组和对象的某些变化
直接通过数组下标修改是无法触发响应式的,所以使用set
// 下表为1的数改成5
Vue.set(vm.userInfo,1,5)
官方用法
Vue.set( target, propertyName/index, value )
-
参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
-
返回值:设置的值
-
用法:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如
this.myObject.newProperty = 'hi'
)
注:对象不能是Vue实例或Vue实例的根元素