Vue基础语法-循环遍历

循环遍历

v-for遍历数组

当我们有一组数据需要进行渲染时,我们就可以使用v-for完成。
v-for类似于js中的for循环
格式:

1. v-for=“item in Data”。 item表示每一项的名称,Data表示要遍历的数组。
2. v-for="(item,index) in Data"。 item表示每一项的名称,index表示索引,Data表示要遍历的数组

    <ul id="app">
		<!-- (item,index) in 数组  这个写法可以显示数组下标 -->
		<li v-for="(item,index) in book">{{index+':'+item}}</li>
	</ul>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				book:["从入门到精通","颈椎病康复指南","心脏病康复指南","活着"]
			}
		})
	</script>

v-for遍历对象

v-for可以遍历对象。比如某个对象中存储着信息,我们希望用列表的形式显示出来。
语法:v-for="(value,key,index) in Obj" value表示对象内容的值,key表示键,index表示索引

<ul id="app">
   	<li v-for="(value,key,index) in student">{{index+':'+key+':'+value}}</li>
   </ul>
   <script type="text/javascript">
   	var app=new Vue({
   		el:"#app",
   		data:{
   			student:{
   				id:345,
   				name:"张三",
   				age:18,
   				hobby:"唱跳rap"
   			}
   		}
   	})
   </script>

v-for遍历数组对象

Vue官方建议,如果我们使用v-for去遍历一个对象,数组的话,建议给对应的元素或者组件上加一个key属性

<ul id="app">
		<li v-for="item in stuList" :key="item.id">{{item.id +':'+ item.name +':'+ item.age +':'+ item.hobby}}</li>
</ul>
<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				stuList:[
					{id:1,name:"张三",age:18,hobby:"唱跳rap"},
					{id:2,name:"李四",age:19,hobby:"唱跳篮球"},
				]
			}
		})
</script>