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()原理一样的啊
vue的数组如何存储数据的更多相关文章
- vue中的watch方法 实时同步存储数据
watch 监视模式里面有个独特的方法handler 注意要加上deep: true.deep为true时,当对象的key值改变时也监听 当值发生改变被watch监视到触发了事件 开始执行handle ...
- C#中存储数据的集合:数组、集合、泛型、字典
为什么把这4个东西放在一起来说,因为c#中的这4个对象都是用来存储数据的集合……. 首先咱们把这4个对象都声明并实例化一下: //数组 ]; //集合 ArrayList m_AList = new ...
- vue 本地存储数据 sessionStorage
在vuex 下的 action下的userAction.js中添加 export function login(from, self) { axPost('/api/login', from, fun ...
- vue教程1-02 data里面存储数据
vue教程1-02 data里面存储数据 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- vue向数组中动态添加数据
vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
随机推荐
- taro 引用相对路径图片
直接将相对路径放在src属性中,不起作用, 需要先import进来,最好把图片放到服务器上,然后直接写http路径 错误写法: <Image src="./images/front.p ...
- 深入理解 Linux 内存管理
1. 内存地址 以Intel的中央处理器为例,Linux 32位的系统中.物理内存的基本单位是字节(Byte),1个字节有8个二进制位. 每一个内存地址指向一个字节,内存地址加1后得到下一个字节的地址 ...
- UVa 1303 - Wall
题目:有非常多点.修一座最短的围墙把素有点围起来,使得全部点到墙的距离不小于l. 分析:计算几何,凸包. 假设.没有距离l的限制.则答案就是凸包的周长了.有了距离限制事实上是添加了2*π*l. 证明: ...
- java 正则举例
Greedy 数量词 X? X,一次或一次也没有 X* X,零次或多次 X+ X,一次或多次 X{n} X,恰好 n 次 X{n,} X,至少 n 次 X{n,m} X,至少 n 次,但是不超过 m ...
- Apache POI – Reading and Writing Excel file in Java
来源于:https://www.mkyong.com/java/apache-poi-reading-and-writing-excel-file-in-java/ In this article, ...
- ASP.NET#在设计窗口上添加了一个SqlDataSource控件后,没有显示出来?
在设计窗口上添加了一个SqlDataSource控件后,没有显示出来,但后台代码是有的 处理的办法:菜单栏->视图->可视辅助->ASP.NET非可视控件 (我用的是VS2012)
- PHP-学习大规模高并发Web系统架构及开发推荐书籍
以下书籍内容涵盖大型网站开发中几个关键点:高可用.高性能.分布式.易扩展.如果想对大规模高并发Web系统架构及开发有很系统的学习,可以阅读以下书籍,欢迎补充! 一.<Linux企业集群—用商用硬 ...
- Java compiler level does not match解决方法(转)
本文转自:https://www.cnblogs.com/lauer0246/p/5740572.html#undefined 从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclips ...
- HDUOJ---(4708)Herding
Herding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- javaBean与map类型相互转换
/** * 把Map键值对转化为javaBean对象 * * @param type * @param map * @return * @throws Exception */ private Obj ...