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

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法:

  • for="item in items"> {{ item.message }}
var vm = new Vue({ el: '#el', data: { items: [ {message: 'foo'}, {message: 'boar'} ] } })

在v-for块中,我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。

  • for="(item, index) in items"> {{ item.message }} {{ index }}
var vm = new Vue({ el: '#el', data: { items: [ {message: 'foo'}, {message: 'bar'} ] } })

也可以用of替代in作为分隔符,因为它是最接近JavaScript迭代器的语法: