【学习笔记】20-v-for遍历数组和对象的学习

v-for用于遍历数组和对象

一般服务器的数据接收会用到v-for的遍历，有三种遍历场景

1. 遍历对象的过程中，如果只获取一个值，那么获取到的是value
2. 获取key和value 格式(item,index)
3. 获取key、value和index 格式(item,key,index)

示例代码

	<div id="app" >
	<ul>
		<!--1.遍历对象的过程中，如果只获取一个值，那么获取到的是value-->
		<li v-for="item in ary">{{item}}</li>
	</ul>
	<ul>
		<!--2.获取key和value 格式(item,index) -->
		<li v-for="(item,key) in ary">{{key}}--{{item}}</li>
	</ul>
	<ul>
		<!--3.获取key、value和index 格式(item,key,index) -->
		<li v-for="(item,key,index) in person">{{index}}--{{key}}---{{item}}</li>
	</ul>
	</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			ary:['电影','综艺','电视剧','动画片'],
			 person:{
				 name:'zhangsan',
				 height:'183', 
				 weight:"75"
			 }
		},
	})
</script>

显示结果

注意

对象的遍历一般很少用到角标index的遍历