6-Vue-条件渲染

六、列表渲染

v-for

看个简单例子

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

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果为：

• Foo
• Bar

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

结果为：

• Parent-0-Foo
• Parent-1-Bar

也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items">
    
</div>

当然我们也可以用 v-for 来遍历一个对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

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

也可以提供第二个参数是键名

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

也可以用第三个参数作为索引：

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

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })。

显示过滤/排序后的结果

如果想要显示一个数组经过过滤或排序过的结果，但是想保存原来的结果，可以考虑创建一个计算属性，来返回过滤/排序后的结果。

举例：

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

计算属性不适用的情况下（比如嵌套的 for 循环，可以使用方法）

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

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

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

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

结果：

1 2 3 4 5 6 7 8 9 10

当 v-for 和 v-if 同时使用时，v-for 的优先级更高

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

如果目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 template )上。如：

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>