Vue学习--列表渲染

最新推荐文章于 2022-10-19 09:08:54 发布

刘远山

最新推荐文章于 2022-10-19 09:08:54 发布

阅读量303

点赞数

本文链接：https://blog.csdn.net/weixin_39218464/article/details/106318401

版权

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。（指令指的是带有v-的语句）

1、使用v-for指令对object对象进行列表渲染
2、key表示数组的索引，value表示数组的值
3、为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

	<!-- 使用v-for指令对items数组进行列表渲染迭代 -->
	<li v-for="item in items"> 
		{{item.message}} <!-- item对象.message属性 -->
	</li>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<ul>
		<!-- 其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名 -->
		<!-- 使用v-for指令对items数组进行列表渲染迭代 -->
		<li v-for="item in items"> 
			{{item.message}} <!-- item对象.message属性 -->
		</li>
	</ul>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			items:[
				{message:'Foo'},//每一个数组元素都是一个对象
				{message:'Bar'},
			]
		}
	}) 
</script>
</body>
</html>

显示结果页面
在这里插入图片描述或者这样使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<ul>
		<!-- 使用v-for指令对object对象进行列表渲染 -->
		<li v-for="value in object"> 
			{{value}} 
		</li>
	</ul>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			object:{//声明object对象  具有title、author、publishedAt属性
				title: 'How to do lists in Vue',
				author: 'Jane Doe',
				publishedAt: '2016-04-10'
			}
		}
	}) 
</script>
</body>
</html>

显示结果页

在 v-for 里使用对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<ul>
		<!-- 其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名 -->
		<!-- 使用v-for指令对items数组进行列表渲染迭代 -->
		<!-- index为数组索引 -->
		<!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute： -->
		<li v-for="item,index in items" :key="index"> 
			{{index}}---{{item.message}} <!-- item对象.message属性 -->
		</li>
	</ul>
	<ul>
		<!-- 使用v-for指令对object对象进行列表渲染 -->
		<!-- key表示数组的索引，value表示数组的值 -->
		<!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute： -->
		<li v-for="value,key in object" :key="key"> 
			{{key}}----{{value}} 
		</li>
	</ul>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			items:[
					{message:'Foo'},//每一个数组元素都是一个对象
					{message:'Bar'},
				],
			object:{//声明object对象  具有title、author、publishedAt属性
				title: 'How to do lists in Vue',
				author: 'Jane Doe',
				publishedAt: '2016-04-10'
			}
		}
	}) 
</script>
</body>
</html>