说明

今天将给大家介绍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的理解,希望对您能有帮助!
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐