vue 触发视图更新
1. Vue.set可以设置对象或者数组的值, 通过key或数组索引, 可以触发视图更新语法:Vue.set(target,propertyName/index, value)参数: {object | Array } target 修改的数组或者对象{string | number } propertyName/index修改的对象名或者对应的下标...
1. Vue.set
可以设置对象或者数组的值, 通过key或数组索引, 可以触发视图更新
语法:
Vue.set(target,propertyName/index, value)
参数: {object | Array } target 修改的数组或者对象
{string | number } propertyName/index 修改的对象名或者对应的下标
{any} value 修改成功的值
Vue.set(app.arr,1,'qq')
返回值: 设置的值
用法:
向响应式对象中添加一个property,并确保这个新property同样是响应式的,且触发试图更新
它必须用于向响应式对象上添加新的property,因为Vue无法探测普通的新增 property
Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue) //数组
Vue.set(obj, keyItem, newValue)
this.obj.$set(keyItem, newValue) //对象
2. Vue.delete
删除对象或数组中的元素, 通过key或者数组索引,可以触发视图更新
语法:
Vue.delete(target, key)
参数: {object | Array} target
{string | number} key/index
用法: 删除对象的属性
3. 数组对象直接修改属性,可以触发视图更新
this.array[0].show = true;
this.array.forEach(function(item) {
item.show = true;
})
4. splice方法修改数组,可以触发视图更新
splice(index,len,[item])
参数: index: 数组下标
len: 替换/删除的长度
item: 替换的值,删除操作的话 item为空
//删除
var arr = ['祁醉','丁汉白','贺朝','严娜'];
arr.splice(0,2);
console.log(arr.toString()); // ['贺朝','严娜']
//替换
var arr = ['穗禾','润玉','锦觅','旭凤'];
arr.splice(0,2, ['李云恺','柳千仁','柏海']);
console.log(arr,toString()) // ['李云恺','柳千仁','柏海',锦觅','旭凤']
//添加
var arr = ['a','b','c','d'];
arr.splice(1,0, ''ttt");
console.log(arr) // ['a','ttt','b','c','d']
5. 数组赋值为新数组,可以触发视图更新
this.array = this.array.filter(....)
this.array = this.array.concat(....)
filter 过滤器
全局过滤器: Vue.filter("globalFilter", function(value) {
})
局部过滤器
filters: {
componentsFilter: function(value) {
}
}
concat() 基于当前数组的所有项创建一个新数组
var arr = [`大漠`,'30','W3cplus'];
console.log(arr); // ["大漠", "30", "W3cplus"]
var arr2 = arr.concat('Blog','2014');
console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]
6. 用Object.assign或lodash.assign可以为对象添加响应式属性,可以触发视图更新
//Object.assign的单层的覆盖前面的属性,不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})
//assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2})
//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})
更多推荐
所有评论(0)