VUE关于data对象中数组修改和对象添加属性的响应式问题

数组:

根据VUE官网:

数组修改:

  修改数组某个元素的值:

    Vue.set(this.items, indexOfItem, newValue);

    this.$set(this.items, indexOfItem, newValue);

    this.items.splice(indexOfItem, 1, newValue);

   修改数组的长度:vm.items.splice(newLength);

对象:

  给数组新添加响应式属性:

    Vue.set(vm.userProfile, ‘age‘, 27);

    vm.$set(vm.userProfile, ‘age‘, 27);

  同时添加多个属性:

    vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: ‘Vue Green‘ })

原文地址:https://www.cnblogs.com/lianchenxi/p/11731311.html

时间: 2024-08-28 03:35:58

VUE关于data对象中数组修改和对象添加属性的响应式问题的相关文章

《C++ Primer》 对象、数组、基于对象设计、泛型设计

数组 C++ 不支持数组的抽象 abstraction 也不支持对整个数组的操作我们有时会希望对整个数组进行操作例如把一个数组赋值给另外一个数组对两个数组进行相等比较或者想知道数组的大小 size 例如给出两个数组我们不能用赋值操作符把一个数组拷贝到另一个中去. int array0[ 10 ], array1[ 10 ]; array0 = array1;  // error 数组类型本身没有自我意识它不知道自己的长度我们必须另外记录数组本身的这些信息. 数组和指针的关系: int ia[]

spring中获取dao或对象中方法的实例化对象

spring中获取dao的中方法的实例化对象: 1 //获取应用上下文对象 2 ApplicationContext ctx = new ClassPathXmlApplicationContext("spring-config.xml"); 3 //例子:获取dicDao实例 4 dicDao = ctx.getBean(IDicDao.class); //例子2:获取MemcacheAccess的实例: 5 memcachedAccess = ctx.getBean(Memcach

对象和数组-创建自定义对象

———————————————————————————————— <script type="text/javascript">                //最简单的创建对象的办法,由一对大括号括起来            var obj001 = {};            //使用大括号创建一个内容是空的对象            obj001.prop1 = 100;            //为对象添加一个属性prop1,赋值为100            

runtime在实际开发中的应用-为类别添加属性

利用运行时set和get这两个API,可以让类别添加属性 1.创建一个类别:NSObject+Category 2..h生命get和set方法 @property(nonatomic,copy)NSString *name; 3..m重写set和get方法,内部利用runtime给属性赋值和取值 char nameKey; - (void)setName:(NSString *)name { // 将某个值跟某个对象关联起来,将某个值存储到某个对象中 objc_setAssociatedObje

Vue删除data列表中的项

下为异步删除购物车,并清空当前条目 1 cartDel: function (item) { 2 let _this = this; 3 _this.confirm("确认删除吗?", function () { 4 _this.axios.post(cartDel, qs.stringify({ 5 'cart_id': item.cart_id 6 })).then(function (res) { 7 // console.log(res) 8 if (res.data.code

javascript中数组常用的方法和属性

前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属性和方法,在此记录一下. 数组常用的属性和方法 常用属性 Array.length:返回数组的大小 常用方法 Array.pop():删除并返回数组的最后一个元素 Array.push():向数组的结尾添加元素 Array.shift():将元素移除数组 Array.unshift():向数组头部添

【ASP.NET】DataContract序列化,反序列化对象中包含用接口声明的属性时的处理方法

为此对象添加KnownType属性(Attribute).类型为用接口声明的属性(Property)的所有可能类型. 示例如下: 1 public interface IKey 2 { 3 [DataMember] 4 int Id { get; set; } 5 6 [DataMember] 7 string Name { get; set; } 8 } 9 10 [DataContract] 11 public abstract class KeyBase : IKey 12 { 13 [D

vue中数组更新视图不响应问题

数组更新注意事项 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 举个例子: var vm = ne

js 去掉数组对象中的重复对象

在数组对象中去掉重复的对象: export function deteleObject(obj) { var uniques = []; var stringify = {}; for (var i = 0; i < obj.length; i++) { var keys = Object.keys(obj[i]); keys.sort(function(a, b) { return (Number(a) - Number(b)); }); var str = ''; for (var j =