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

<!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>
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页