v-for

• 作用：v-for指令用于循环遍历显示一个数组或者对象 。

v-for嵌套

<div id="app">
	<div class="movie" v-for="obj in movies">
		<p>{{obj.name}}</p>
		<p>{{obj.year}}</p>
		<p>{{obj.dec}}</p>
		<p>
			<span v-for="tag in obj.tag" v-text="tag"></span>
		</p>
	</div>
</div>
<script type="text/javascript">
		new Vue({
				el: "#app",
				data: {
					movies: [{
						name: "西西里的美丽传说",
						year: 1992,
						dec: "美丽无罪",
						tag: ["人性", "战争", "伦理"]
					}, {
						name: "天使爱美丽",
						year: 2001,
						dec: "治愈向，拥抱全世界",
						tag: ["爱情"]
					}]
				}
			})
</script>

v-for为什么要加key

• 各位可以查看这个博主的博客https://www.jianshu.com/p/4bd5e745ce95
• vue的高度复用性所以我们可以增加Key可以标识组件的唯一性。

v-for中的参数

遍历数组

• 当只有一个参数时：

<p v-for="obj in arr">{{obj}}</p>

 <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
            arr:['小猪','小明' ,'小红']
            }
        })
 </script>

• 当两个参数时：

<p v-for="(obj,index) in arr">{{obj}}--{{index}}</p>

第一参数为数组元素/第二参数为该数组元素下标
结果为小猪–0 小明–1 小红–2

遍历对象

• 当只有一个参数时：

 <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
            arr:{
            	name:"小明",
            	age:18,
            	height:183
            }
            }
        })
 </script>

<p v-for='(obj,key,index) in arr'>{{obj}}--{{key}}--{{index}}</p>

• 只有一个参数为内容
• 有两个参数的情况 / 第一参数为内容 / 第二参数为键值Key
• 有三个参数的情况 / 第一参数为内容 / 第二参数为键值Key / 第三参数为下标

结果为：小明--name--0
			  18--age--1
		       183--height--2