vue06 基础-列表渲染

数组

我们可以用v-for 指令基于一个数组来渲染一个列表。

  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

<li v-for="(item, index) in items">

对象

可以用 v-for来遍历一个对象的属性。

 <li v-for="value in object">
    {{ value }}
  </li>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

你也可以提供第二个的参数为 property 名称 (也就是键名)：

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

结果

image.png

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
补充:
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。使用方式 =>Object.keys(obj)

变异方法

使用变异方法也会更新视图
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组

变异数组会改变原始数组。而替换数组不会改变原始数组，总是返回一个新数组。例如 filter()、concat() 和 slice()。它们不会改变原始数组，而总是返回一个新数组。

Vue 不能检测数组和对象的变化，解决方法
https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

过滤/排序

可以创建一个计算属性，来返回过滤或排序后的数组。

<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
    })
  }
}

但是不是所有情况都适用，比如在多重v-for循环中。那么就要使用methods。

在 v-for 里使用值范围

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

结果：