博客详情

vue中v-for遍历 (原创)

作者：朝如青丝暮成雪
发布时间：2019-03-23 15:34:34 文章分类：vue 阅读(907) 评论(0)

vue中v-for遍历

v-for 遍历元素中注意要指定:key 。

			<!DOCTYPE html>
		
			<html lang="en">
		
			<head>
		
			<meta charset="UTF-8">
		
			<title>Title</title>
		
			<style>
		
			    .thin{
		
			        font-weight: 200;
		
			    }
		
			    .red{
		
			        color: red;
		
			    }
		
			        .italic{
		
			         font-style:italic;   
		
			        }
		
			        .active{
		
			            letter-spacing: 0.5em;
		
			        }           
		
			</style>
		
			<script src="../lib/vue-2.2.2.js"></script>
		
			</head>
		
			<body>
		
			<div id="app">
		
			<!--<p v-for="item in list">
		
			     {{item}}
		
			 </p>--> 
		
			<!--注意：会循环产生多个p标签，注意指定:key -->
		
			<p v-for="(item ,i) in list" :key="i">
		
			    索引{{i}},值{{item}}
		
			</p>
		
			<!-- v-for="(user,i) in mylist" 遍历数组 item,i -->
		
			<p v-for="user in mylist">
		
			  {{user.id}},{{user.name}}
		
			</p>
		
			<br />--------------
		
			<!-- v-for 遍历对象 val,key,i-->
		
			<p v-for="(val,key,i) in myobj" :key="i">{{key}}:{{val}}</p>
		
			<br />--------------
		
			<!--v-for 遍历数字 i-->
		
			<p v-for="i in 4">数字:{{i}}</p>
		
			</div>
		
			</body>
		
			<script>
		
			var vm=new Vue({
		
			el:"#app",
		
			data:{
		
			    list:[1,2,3,4,5],
		
			    mylist:[
		
			       {id:1,name:'zhangsan'},
		
			       {id:2,name:'lisi'},
		
			       {id:3,name:'wangwu'}
		
			    ],
		
			    myobj:{id:1001,name:'张三',age:22,city:'北京'},
		
			},
		
			methods:{
		
			}
		
			});
		
			</script>
		
			</html>