Vue学习--列表渲染

最新推荐文章于 2024-07-22 09:08:11 发布

奔跑的蜗牛.

最新推荐文章于 2024-07-22 09:08:11 发布

阅读量413

点赞数

分类专栏：前端学习汇总文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/MrWangisgoodboy/article/details/125601091

版权

前端学习汇总专栏收录该内容

23 篇文章 0 订阅

订阅专栏

我们可以用 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>
	</head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<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:'wyt'},//每一个数组元素都是一个对象
					{message:'lmp'},
					{message:'hyd'}
				]
			}
		}) 
	</script>
	</body>


</html>

显示结果页面