Vue教程5-条件与列表渲染

最新推荐文章于 2024-12-23 10:42:50 发布

原创最新推荐文章于 2024-12-23 10:42:50 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Vue中条件渲染与列表渲染的高级用法，包括v-if与v-else的结合使用，以及v-for在数组遍历中的应用。通过实例讲解如何根据不同条件展示不同元素，以及如何高效地渲染列表数据。

条件渲染

之前我们说过 v-if命令接收true/false后会对一个元素进行显示与否，但是当我们需要对多个元素进行切换时，我们就需要多个v-if了。因此Vue就提出了v-else/v-else-if。

假设我们一共三个元素，利用template标签。

<template v-if=' A === B'>
</template>
<template v-else-if=' A === C'>
</template>
<template v-else-if=' A === D'>
</template>
<template v-else>
</template>

这样就可以利用A不同的值来切换三种不同的元素。

v-if与v-for一起使用（不推荐，最好不用）

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

列表渲染

我们通常会使用v-for来遍历数组，从而展示一组列表。

<li v-for="item in items" :key="item.message">
 	{{ item.message }}
</li>

data：{
	items:[
		{ message: '123456' },
		{ message: '654321' }
	]
}

v-for 还支持一个可选的第二个参数，即当前项的索引。

v-for使用

类似于 v-if，你也可以利用带有 v-for 的来循环渲染一段包含多个元素的内容。

<ul>
	<template v-for="item in items">
		<li>{{ item.msg }}</li>
	</template>
</ul>

上面会依次显示数组的内容，若是往自定义组件内传递数组元素，并逐个显示出来，那么就需要key作为唯一标示。

<at-card v-for="info in Info"
        :key="info.id"
        :title="info.title"
        :description="info.description"
        :background="info.backgroud"
        :router="info.router">
</at-card>