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

我有一个梦！

5670人浏览 · 2020-06-28 10:02:37

我有一个梦！ · 2020-06-28 10:02:37 发布

说明

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^