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

    用 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>