(精华2020年5月4日更新) vue教程篇 v-for的使用

2b勿扰

于 2020-05-04 07:03:08 发布

阅读量1.6w

点赞数

分类专栏： (持续更新)vue基础篇文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41181778/article/details/105912294

版权

(持续更新)vue基础篇专栏收录该内容

29 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>常用指令：v-for</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		window.onload = function () {
			new Vue({
				el: '#app',
				data: {
					arr: [12, 4, 5, 34, 2, 11],
					users: [{
							id: 9527,
							name: '唐伯虎',
							age: 25
						},
						{
							id: 1001,
							name: '秋香',
							age: 22
						},
						{
							id: 1002,
							name: '石榴姐',
							age: 24
						}
					]
				}
			});
		}
	</script>
</head>

<body>
	<div id="app">
		<ul>
			<!-- 普通循环 -->
			<li v-for="value in arr">{{value}}</li>
			<!-- 健值循环 -->
			<!-- key指定唯一性 -->
			<li v-for="(item,index) in users" :key="index"> {{index+1}}---{{item.id}} {{item.name}} {{item.age}}</li>
		</ul>
	</div>
</body>

</html>