vue.js入门（12）v-for循环指令

最新推荐文章于 2024-08-11 23:16:38 发布

谢西顾

最新推荐文章于 2024-08-11 23:16:38 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/yiyiyixin/article/details/80356657

版权

vue.js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	
</head>
<body>
<div id="vue-app">
	样例一<br/>
	{{ a[0] }}{{ a[1] }}{{ a[2] }}<br/>
	{{ b[0] }}{{ b[1] }}{{ b[2] }}
	
	样例二<br/>
	<ul>
	<li v-for="x in a">{{ x }}</li>
	<li v-for="y in b">{{ y.name }}----{{y.age}}</li>
	</ul>
	
	样例三<br/>
	<ul>
	<li v-for="(y,index) in b">{{index}}---{{ y.name }}----{{y.age}}</li>
	</ul>
	
	样例四<br/>
	<template v-for="(y,index) in b">{{index}}---{{ y.name }}----{{y.age}}</template><br/>
	
	样例五<br/>
	<template v-for="(y,index) in b">
	<template v-for="(val,key) in y">{{key}}--{{val}}<br/>
	</template>
	
	</template>
	
</div>
	<script src="app.js"></script>
</body>

//app.js

new Vue({
	el:"#vue-app",
	data:
	{	
		a:["day1","day2","day3"],
		b:[
		 {name:"da1",age:50},
		 {name:"da2",age:40},
		 {name:"da3",age:30}
		   ]
		
	},
	  
});