zoukankan      html  css  js  c++  java
  • 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()原理一样的啊

  • 相关阅读:
    算法基础~链表~求两个链表的交点(不考虑时间、空间复杂度)
    《人月神话》阅读笔记一
    html与css学习笔记
    新手教程
    课程信息管理
    关于文件动手动脑
    四则运算随机生成
    关于异常
    第四次动手动脑
    第三次动手动脑
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6773574.html
Copyright © 2011-2022 走看看