用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

  1. <ul id="example-1">
  2.   <li v-for="item in items">
  3.     {{ item.message }}
  4.   </li>
  5. </ul>
  1. var example1 = new Vue({
  2.   el: '#example-1',
  3.   data: {
  4.     items: [
  5.       { message: 'Foo' },
  6.       { message: 'Bar' }
  7.     ]
  8.   }
  9. })

结果：

用 v-for 把一个数组对应为一组元素 - 图1

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

  1. <ul id="example-2">
  2.   <li v-for="(item, index) in items">
  3.     {{ parentMessage }} - {{ index }} - {{ item.message }}
  4.   </li>
  5. </ul>
  1. var example2 = new Vue({
  2.   el: '#example-2',
  3.   data: {
  4.     parentMessage: 'Parent',
  5.     items: [
  6.       { message: 'Foo' },
  7.       { message: 'Bar' }
  8.     ]
  9.   }
  10. })

结果：

用 v-for 把一个数组对应为一组元素 - 图2

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

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