zoukankan      html  css  js  c++  java
  • Vue数组更新

    <!--
    数组更新 7种 会改变原始数组的方法
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    Vue检测到数据变化会更新视图


    不会改变原数组方法,可以使用新数组替代原数组
    数组变化时,并不是直接渲染,而是最大的复用DOM元素,
    替换数组的相同元素不会被重新渲染。无需担心性能问题.
    filter()
    slice()
    concat()

    Vue不能检测到
    1,通过索引直接设置项
    app.list[3] = {};
    2, 修改数组长度
    app.list.length = 1
    Vue.set(this.list, index, item);

    过滤与排序
    不想改变原数组,通过一个数组的副本做过滤或者排序、
    可以使用计算属性来返回过滤或排序后的数组


    -->
    <ol>
    <li v-for="(item,index) in computedList" :key="index">{{item.name}}-{{item.age}}</li>
    </ol>
    <button @click="setList">Vue.Set</button>
    </div>
     

    methods: {

    setList() {
    // this.list[2] = { name: "zhangsan2", age: 30 };
    this.$set(this.list, 2, {
    name: "lisi",
    age: 30
    });
    }
    },

  • 相关阅读:
    nodejs websocket
    [Java] 数组-01 入门
    [Java] 第一,二章 配置, 基础
    [Java] 第四章 异常机制
    [Java] 第三章 面向对象总结
    [Java] 接口-02
    [Java] 接口-01
    [Java] final 关键字
    [Java] 抽象类
    [Java] 多态-01
  • 原文地址:https://www.cnblogs.com/niusan/p/10389494.html
Copyright © 2011-2022 走看看