Vue学习日志：列表渲染（7）

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

1、基本用法

<ul id="example-1">  
	<li v-for="item in items">{
   { item.message }}</li>
</ul>
var example1 = new Vue({  
	el: '#example-1',  
	data: {    
		items: [      
			{message: 'foo' },      
			{message: 'Bar' }    
		]  
	}
})

结果：

。Foo
。Bar

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 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>

2、Template v-for

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如：

<ul>  
	<template v-for="item in items">    
		<li>{
   { item.ms