vue的数组如何存储数据

vue 和 angular 还有有些区别的,

比如,vue中的数组数据改变后,view并没有发生改变,angular就不会这样。

所以VUE 在数组扩展方法中提供以了一个新的API arr.$set(index, value);

此方法通过索引index设置数组元素来触发视图的跟新。

例如:vue 中的

data {

return {

aa: [{name:jxj,age:25},{name:jxj2,age:252},{name:jxj3,age:253}]   }

}

view : 中  <p>my name{{aa[0].name}},my age is {{aa[0].age}}</p>

(1).当我们直接用索引设置元素aa[i].name 和 aa[i].age时,view不会发生改变。

这是vue的一个缺点,为了弥补,vue中提供了$set()方法,vue中还提供了$remove方法,直接删除数组中的指定元素。this.items.$remove(item)。

那么我们需要使用  aa.$set(0, Object.assign({},aa[0],{name:‘jxj2‘,age:26})),才可以触发view的变换。

Object.assign()是ES6中对象的新方法,合并对象,将原对象中所以可枚举的属性,复制到目标对象中。

这里Object.assign({},aa[0],{name:‘jxj2‘,age:26}) 目标对象是个空对象,将对象中{name:‘jxj2‘,age:26}修改的属性合并到源对象aa[0]中,最终又合并到空对象中。形成一个新对象

{name:‘jxj2‘,age:26}。

ps:和jq 的extend()原理一样的啊

时间: 2024-08-02 14:37:36

vue的数组如何存储数据的相关文章

【iOS开发-44】通过案例谈iOS代码重构:合并、格式化输出、宏变量、利用数组字典存储数据,以及利用plist的终极知识

首先我们今天的案例就是如下5个页面通过上一张下一张来切换: (1)第一步,基本是以很傻很直接的方式来创建,这里用到的主要点有: --把对象变量设置为全局变量使得可以在其他方法中调用来设置它们的属性 --设置了一个全局变量index,默认是0,然后通过增加减少这个index值并结合switch来调用不同的数据. --利用先调用一次change方法初始化页面,使得页面定格在第一帧. --利用按钮的enabled属性来设置按钮是否可以被点击,然后结合index的值分别在第1张和第5张时分别把上一张和下

C++学习笔记之由文本文件读取数据到vector模板建立的二维数组 并存储为新的文本文件

阅读本文可首先参考: C++学习笔记之输入.输出和文件 测试数据: 1 /*读取txt文件到二维数组*/ 2 #include <iostream> 3 #include <fstream> 4 #include <vector> 5 #include <string> 6 7 using namespace std; 8 9 typedef vector< vector<int> > D2array; //二维数组 10 typed

vue 本地存储数据 sessionStorage

在vuex 下的 action下的userAction.js中添加 export function login(from, self) { axPost('/api/login', from, function(res) { if (res.data == 0) { alert("账号密码错误") } else { note.commit('userloginbean', res.data); self.$router.push("/"); sessionStora

71. C++ 分别用指针数组和二维数组生成二维空间,存储数据并释放。 练习new/delete, new[]/delete[]

分别用指针数组和二维数组生成二维空间,存储数据并释放.比如,数据如下:  //使用了下fgetc() 1 #include <iostream> 2 #include <stdio.h> 3 using namespace std; 4 5 6 int main() 7 { 8 #if 0 //生成二维数组存储 9 FILE* fp = fopen("G:\\qtcode\\temp.txt","r"); 10 11 //char buf[3

java 21 - 10 文本文件和集合之间互相存储数据

有时候,我们会遇到单独写入数据到文本文件的情况.比如: 需求:把ArrayList集合中的字符串数据存储到文本文件 分析: A:ArrayList集合中存储的是String类 B:要存储的文件是文本文件,所以用字符流,为了快速,用缓冲字符流A 数据源: ArrayList<String>  -----  遍历集合,得到数据   目的地: c.txt  ------  FileWriter  ------ BufferedWriter 1 public static void main(Stri

一种存储数据的方法

写程序就是和逻辑和数据打交道,说的简单一点就是和数据打交道.说到数据,数据的存储当然是很重要的. 数据存储也是有一定的方法,在平常中,我们会用到int型来存储数据,或者bool型(C语言中没有,char型)来存储表示0,1的flag.有时候想想,如果只是简单的存储true和false的话,对于unsigned char型来说是否过于浪费了?信息论告诉我们,1bit数据就可以表示true和false,为什么不能将其存到1bit中? 那么,现在,我们开始将数据压缩. 如果有8个这样的数据,我们可以存

Android存储数据方式(转)

转自http://www.cnblogs.com/hanyonglu/archive/2012/03/01/2374894.html   本文介绍Android中的5种数据存储方式. 数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 4 使用ContentProvider存储数据 5 网络存储数据 下面将为大家一一详细介绍. 第一种: 使用Sha

NSUserDefaults轻量级本地存储数据

NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefaults里面读取上次登陆的信息咯. 因为如果使用自己建立的plist文件什么的,还得自己显示创建文件,读取文件,很麻烦,而是用NSUserDefaults则不用管这些东西,就像读字符串一样,直接读取就可以了. NSUserDefaults支持的数据格式有:NSNumber(Integer.Float

使用嵌入式关系型SQLite数据库存储数据

除了可以使用文件或SharedPreferences存储数据,还可以选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库—SQLite, 1.SQLite3支持 NULL.INTEGER.REAL(浮点数字).TEXT(字符串文本)和BLOB(二进制对象)数据类型,虽然它支持的类型虽然只有五种,但实际上sqlite3也接受varchar(n).char(n).decimal(p,s) 等数据类型,只不过在运算或保存时会转成对应的五种数据类型. 2.SQLit