vue中数组列表数据同步更新方法

责编:menVScode 2018-01-27 2:10 阅读(874)

        Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

push():向后添加元素
pop():删除并返回数组的最后一个元素
shift():删除第一个元素,并返回第一个元素的值
unshift():向数组的开头添加一个或更多元素,并返回新的长度
splice():从数组中添加/删除项目,然后返回被删除的项目。
sort():对数组的元素进行排序,并返回数组
reverse():将数组中的元素的顺序进行反转

        push例子

<template>
  <div id="app">
    <button @click="addItem">添加</button>
    <ul>
      <li v-for="item in list">{{item.name}}-{{item.price}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list:[{ name:'apple',price:35 },{ name:'pear',price:26 },{ name:'banana',price:19}]
    }
  },
  methods:{
    addItem(){
      this.list.push({name:'sugar',price:99})
    }
  }
}
</script>

        不会触发列表更新的情况

        (1)filter(),concat() 和 slice() 是不会触发列表更新的。

        (2)当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

        利用 Vue.set() 实现与上面同样的效果

methods:{
    addItem(){
      //参数1:要更改的数组对象;参数2:更改元素的下标;参数3:改成新的数据
      Vue.set(this.list, 1, {name:'newPear',price:39})
    }
}

        (3)当你修改数组的长度时,例如:vm.items.length = newLength

标签: vue 数组
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码