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()原理一样的啊

  • 相关阅读:
    SQL GUID和自增列做主键的优缺点
    php 一维数组去重
    php + crontab 执行定时任务
    PHP内置函数生成随机数的方法汇总
    PHP替换回车换行的三种方法
    Yii2查询之where条件拼装
    yii2 使用阿里大鱼短信
    javascript对数据处理
    Vue 404页面处理
    vue 中view层中方法的使用
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6773574.html
Copyright © 2011-2022 走看看