Vue学习笔记----列表渲染_vue根据model值渲染列表-优快云博客

本文详细介绍了Vue.js中的列表渲染技术，包括使用v-for指令遍历数组和对象，以及如何正确地更新数据以触发视图更新。同时，探讨了排序和过滤的实现方式，避免直接修改数组和对象带来的问题。

列表渲染

v-for

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

语法 (item，index) in items index可选配置项
v-for块中可访问所有data
v-for也可以对一个对象进行遍历 (key、index可选配置项)

<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

注意事项

在对数组进行操作push/pop/sort/reverse等时，dom会自动触发视图更新
但是item[index] = value; vm.items.length = 2例外
因此vue提供了根据index更新value的方法

Vue.set(vm.items, indexOfItem, newValue)  
vm.items.splice(indexOfItem, 1, newValue)

同样的对对象属性的添加或删除也无法自动触发

//单个属性
Vue.set(object, key, value)  
//多个属性
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

排序、过滤

排序、过滤本质其实是通过computed计算属性或methods方法来动态操作数组建立数组的副本，在不改变原数组的前提下实现排序、过滤

//computed
<li v-for="n in evenNumbers">{{ n }}</li>   

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

//methods
<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}