vuejs第二天【循环语句】

最新推荐文章于 2022-10-19 09:43:32 发布

qdd007

最新推荐文章于 2022-10-19 09:43:32 发布

阅读量115

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/superAdmin_root/article/details/93190064

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-for 指令遍历一个数组

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for指令</title>
	<script src="vue.min.js"></script>
</head>
<body>
	<div id="app">
		<ol>
			<li v-for="site in sites">
			{{site.name}}
			</li>
		</ol>
	</div>


	<script>
	new Vue({
		el: app,
		data:{
		sites: [
		{name: 'noob'},
		{name: 'google'},
		{name: 'Taobao'}
		]	
		}
	})
	</script>
</body>
</html>

v-for 指令遍历pojo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for指令</title>
	<script src="vue.min.js"></script>
</head>
<body>
	<div id="app">
		<ol>
			<li v-for="value in object">
			{{value}}
			</li>
		</ol>
	</div>


	<script>
	new Vue({
		el: app,
		data:{
		object: {
			name:'百度',
			url: 'https://www.baidu.com/',
			description: '搜索引擎'
		}	
		}
	})
	</script>
</body>
</html>

也可以在遍历pojo的时候提供键

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for指令</title>
	<script src="vue.min.js"></script>
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="(value,key) in object">
			{{key}}  : {{value}}
			</li>
		</ul>
	</div>


	<script>
	new Vue({
		el: app,
		data:{
		object: {
			name:'百度',
			url: 'https://www.baidu.com/',
			description: '搜索引擎'
		}	
		}
	})
	</script>
</body>
</html>

也可以加上索引v-for="(value, key, index) in object"

v-for也可以循环整数 v-for = “n in 10”

qdd007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs第二天【循环语句】

v-for 指令遍历一个数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-for指令</title> <script src="vue.min.js"></script></head&gt...
复制链接

扫一扫