v-if、v-else和v-else-if的用法

最新推荐文章于 2024-03-11 11:12:35 发布

我有一个梦！

最新推荐文章于 2024-03-11 11:12:35 发布

阅读量5.5k

点赞数 7

分类专栏：前端基础-Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40951289/article/details/106992869

版权

前端基础-Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

说明

今天将给大家介绍vue.js中常见指令v-if、v-else和v-else-if。

v-if的用法

v-if根据判断条件的值来有条件的渲染元素。如果条件的值为真，则元素出现在页面中。反之则不会出现。
判断条件可以是一个变量：

<div id="app">
	<p v-if="flag">Hello</p>
</div>
<script>
	new Vue({
		el: "#app",
		data: {
			flag: true,
		},
	});
</script>

判断条件也可以是一条语句：

<p v-if="5>3">Hello</p>

v-else的用法

v-else不需要判断条件，但是它的前一个兄弟元素必需是v-if或者v-else-if。它为v-if或v-else-if添加了else块。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
            <p v-if="flag">Hello</p>
			<p v-else>Vue</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					flag: false,
				},
			});
		</script>
	</body>
</html>

v-else-if的用法

v-else-if的前一兄弟元素必须有 v-if 或 v-else-if。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<p v-if="flag=='a'">a</p>
			<p v-else-if="flag=='b'">b</p>
			<p v-else-if="flag=='c'">c</p>
			<p v-else>d</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					flag: "c",
				},
			});
		</script>
	</body>
</html>

结语

以上就是我对v-if、v-else和v-else-if的理解，希望对您能有帮助！
在这里插入图片描述

我有一个梦！

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
v-if、v-else和v-else-if的用法

说明今天将给大家介绍vue.js中常见指令v-if、v-else和v-else-if。v-if的用法v-if根据判断条件的值来有条件的渲染元素。如果条件的值为真，则元素出现在页面中。反之则不会出现。判断条件可以是一个变量：<div id="app"> <p v-if="flag">Hello</p></div><script> new Vue({ el: "#app", data: { flag: true, }
复制链接

扫一扫