009_Vue循环结构

最新推荐文章于 2022-11-04 00:00:00 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-11-04 00:00:00 发布

阅读量238

点赞数

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/aihiao/article/details/122852105

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1. 循环结构

1.1. v-for遍历数组, key的作用, 帮助Vue区分不同的元素, 从而提高性能。

<ul v-for="item in books">
	<li>{{item}}</li>
</ul>

<ul v-for="(item, index) in books">
	<li>[{{index}}] {{item}}</li>
</ul>

<ul :key="item.id" v-for="(item, index) in bookArr">
	<li>[{{item.id}}] {{item.name}}</li>
</ul>

1.2. v-for遍历对象

<ul v-for="(v, k, index) in book">
	<li>[{{index}}] {{k}}: {{v}}</li>
</ul>

2. 循环结构例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<div>
				<ul v-for="item in books">
					<li>{{item}}</li>
				</ul>
			</div>

			<hr />

			<div>
				<ul v-for="(item, index) in books">
					<li>[{{index}}] {{item}}</li>
				</ul>
			</div>

			<hr />

			<div>
				<ul v-if="index>1" :key="item.id" v-for="(item, index) in bookArr">
					<li>[{{item.id}}] {{item.name}}</li>
				</ul>
			</div>

			<hr />

			<div>
				<ul v-for="(v, k, index) in book">
					<li>[{{index}}] {{k}}: {{v}}</li>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					books: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计", "JavaScript权威指南"],
					bookArr: [
						{id: 10001, name: "JavaScript DOM编程艺术"}, 
						{id: 10002, name: "高性能JavaScript"}, 
						{id: 10003, name: "javascript高级程序设计"},  
						{id: 10004, name: "JavaScript权威指南"}
					],
					book: {id: 10001, name: "JavaScript DOM编程艺术"},

				}
			});
		</script>
	</body>
</html>

2.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
009_Vue循环结构

1. 循环结构1.1. v-for遍历数组, key的作用, 帮助Vue区分不同的元素, 从而提高性能。<ul v-for="item in books"> <li>{{item}}</li></ul><ul v-for="(item, index) in books"> <li>[{{index}}] {{item}}</li></ul><ul :key="item.id" v-
复制链接

扫一扫

专栏目录