Vue.js学习笔记：v-for循环

    v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，此外，v-for还可以遍历对象的属性，并且可以和template模板元素一起使用。

一.基本语法

（1）.v-for基于一个数组渲染一个列表

 语法：item in items（数组元素的别名 in 数据数组）

我们可以使用 v-for 指令，将一个数组渲染为列表项。v-for 指令需要限定格式为 item in items 的特殊语法，其中，items 是原始数据数组(source data array)，而 item 是数组中每个迭代元素的指代别名(alias)：

	
	


    

        

            {{ item.text }}
        
    

（2）.template v-for

渲染一个包含多个元素的块，需要将多个标签都用v-for遍历，那么就需要用template标签。同样，template在实际渲染的时候不会出现，只是起到一个包裹作用。

二.迭代语法变化
　　由于在Vue2.0中，v-for迭代语法已经发生了变化:

• 丢弃$index和$key

• 新数组语法

  • value in arr

  • (value, index) in arr

• 新对象语法

  • value in obj

  • (value, key) in obj

  • (value, key, index) in obj

(1).index索引

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 index，正如你猜到的，它是当前数组元素的索引。

	
	


	
{{ fruits}}
	

		

		  {{ index }}: {{ item.message }}
		
	

你还可以不使用 in，而是使用 of 作为分隔符，因为它更加接近 JavaScript 迭代器语法：

	
{{ fruits}}
	

		

		  {{ index }}{{ item.message }}
		
	

也是如上图所示。

(2).key键名

语法：(value, key) in obj

	
	


	
{{ fruits}}
	

		

		  {{ key }}: {{ value }}
		
	

语法：(value, key, index) in obj

简单分析下，更多的内容查看官网：https://vuefe.cn/v2/guide/list.html