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的数组如何存储数据的更多相关文章

  1. vue中的watch方法 实时同步存储数据

    watch 监视模式里面有个独特的方法handler 注意要加上deep: true.deep为true时,当对象的key值改变时也监听 当值发生改变被watch监视到触发了事件 开始执行handle ...

  2. C#中存储数据的集合:数组、集合、泛型、字典

    为什么把这4个东西放在一起来说,因为c#中的这4个对象都是用来存储数据的集合……. 首先咱们把这4个对象都声明并实例化一下: //数组 ]; //集合 ArrayList m_AList = new ...

  3. vue 本地存储数据 sessionStorage

    在vuex 下的 action下的userAction.js中添加 export function login(from, self) { axPost('/api/login', from, fun ...

  4. vue教程1-02 data里面存储数据

    vue教程1-02 data里面存储数据 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  6. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...

  7. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  8. vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...

  9. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

随机推荐

  1. 'htmlentities(): charset `utf8' not supported, assuming utf-8'

    TP5.1框架报错!  Fatal error: Uncaught exception 'think\exception\ErrorException' with message 'htmlentit ...

  2. java程序员认证考试题库

    第一部分 基础知识练习 目标 本章对应于<学生指南>各章的内容分别提供了练习题集,包括: ●  第一章Java入门 ●  第二章数据类型和运算符 ●  第三章流程控制与数组 ●  第四章封 ...

  3. 〖Linux〗OK6410a蜂鸣器的驱动程序编写全程实录

    最近在看一本书,受益匪浅,作者是李宁,下边是编写本次蜂鸣器的全程实录: 1. 了解开发板中的蜂鸣器 1) 查看蜂鸣器buzzer在底板中的管脚信息 2) 查看蜂鸣器在总线中的信息 3) 翻看S3C64 ...

  4. 〖Linux〗使用gsoap搭建web server(C)

    1. gsoap的好处就不用说了:百度百科 2. gsoap的下载地址:项目地址,目前我使用的是2.8.15版本 3. 开发环境:Ubuntu13.10 4. 具体操作步骤(以简单相加为例): 1) ...

  5. java beanUtils框架

    beanUtils是Apache觉得sun公司的内省不够爽,自己又开发了一套可以操作JavaBean的API 所以beanUtils是第三方jar包,使用beanUtils要导包: 在工程目录下新建一 ...

  6. 微信小程序-简易计算器

    代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  7. iOS-各种动画特效

    概述 广播跑马灯/弹幕/直播点赞/烟花/雪花等动画特效, 后续增加~ 详细 代码下载:http://www.demodashi.com/demo/10674.html 一.实现功能 1. 广播跑马灯 ...

  8. 开源APP 源码

    作者:wjh2005链接:http://www.zhihu.com/question/28518265/answer/88750562来源:知乎著作权归作者所有,转载请联系作者获得授权. 1. Cod ...

  9. linux配置server笔记

    设置防火墙开放80port -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT 尽管看不懂是什么,可是这个是用于开放80p ...

  10. 工具:SVN的Web客户端(ViewVC、SVNWebClient、sventon)和任务管理(Trac、Collaboa)

    http://www.blogjava.net/evanwhj/archive/2006/04/06/39498.aspx 在前面一篇文章中,痛诉了安装ViewVC for Subversion的种种 ...