vue列表渲染

最新推荐文章于 2024-07-05 00:22:54 发布

honey_xi

最新推荐文章于 2024-07-05 00:22:54 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/honey_xi/article/details/105221325

本文介绍了Vue.js中的列表渲染技术，重点讲解了使用`v-for`指令进行循环显示列表内容。通过实例展示了如何根据数组和对象进行渲染，并结合`v-if`进行条件判断，筛选出特定条件（如年龄为偶数）的数据进行显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表渲染

v-for：循环显示列表，只需一个li，即可循环渲染所有内容，所需显示的内容用数组存储，在视图部分采用模板变量显示

<body>
		<div id="app">
			<ul>
				<li v-for="item in students">
					<h3>{{item.studentname}}</h3>
					<p>年龄：{{item.age}}---学校：{{item.school}}</p>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					students:[
						{
							studentname:"小米",
							age:18,
							school:"内师"
						},
						{
							studentname:"小画",
							age:18,
							school:"内师"
						},
						{
							studentname:"小花",
							age:18,
							school:"内师"
						},
					]
				}
			})
		</script>
	</body>

浏览器显示效果
在这里插入图片描述
key为其索引值


```javascript
<ul>
		<li v-for="item,key in students">
			<h3>{{key}}:{{item.studentname}}</h3><!--这个key可以加1 即{{key+1}}显示时从1开始-->
			<p>年龄：{{item.age}}---学校：{{item.school}}</p>
		</li>
</ul>

显示效果
在这里插入图片描述
循环对象：将一个对象中的内容循环显示出来，下为students数组中的第一个对象，小米的内容

<ul>
		<li v-for="item in students[0]">{{item}}</li>
</ul>

显示为
在这里插入图片描述
同样也可以得到key

<ul>
	<li v-for="item,key in students[0]">{{key}}:{{item}}</li>
</ul>

显示
在这里插入图片描述
v-if、v-for条件+列表（渲染年龄为偶数的学生）

<ul>
	<li v-for="item,key in students" v-if="item.age%2==0">
		<h3>{{key+1}}:{{item.studentname}}</h3>
		<p>年龄：{{item.age}}---学校：{{item.school}}</p>
	</li>
</ul>