说明
今天将给大家介绍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的理解，希望对您能有帮助！
