Vue 3 条件渲染(超详细)
大家好,我是小哈。
本小节中,我们将学习如何在 Vue 3 中进行条件判断,然后渲染对应的内容。
v-if 指令
v-if
指令用于条件判断,当指令中的表达式为 true
时,则渲染其内容。示例代码如下:
<template>
<!-- 通过 v-if 指令判断 isShow 是否为 true, 若是则渲染 <a> 标签,否则不渲染 -->
<a href="https://www.quanxiaoha.com" v-if="isShow">犬小哈教程</a>
</template>
<script setup>
import { ref } from 'vue'
// 设置 isShow 变量为 true
const isShow = ref(true)
</script>
运行效果如下:
v-else 指令
有 if
语句就会有 else
语句。v-else
通常与 v-if
搭配使用,当 v-if
表达式为 false
时,则会渲染 v-else
对应的标签。示例代码如下:
<template>
<!-- 通过 v-if 指令判断 isShow 是否为 true, 若是则渲染 <a> 标签 -->
<a href="https://www.quanxiaoha.com" v-if="isShow">犬小哈教程</a>
<!-- 否则渲染下面标签的内容 -->
<div v-else>www.quanxiaoha.com</div>
</template>
<script setup>
import { ref } from 'vue'
// 设置 isShow 变量为 false
const isShow = ref(false)
</script>
运行效果如下:
v-else-if 指令
多条件判断可使用 v-else-if
指令,必须跟在 v-if
或者 v-else-if
之后使用。示例代码如下:
<template>
<!-- 多条件判断 type 变量的数值 -->
<a href="https://www.quanxiaoha.com" v-if="type === 1">犬小哈教程1</a>
<a href="https://www.quanxiaoha.com" v-else-if="type === 2">犬小哈教程2</a>
<a href="https://www.quanxiaoha.com" v-else-if="type === 3">犬小哈教程3</a>
<!-- 条件都不满足,则渲染下面标签的内容 -->
<div v-else>www.quanxiaoha.com</div>
</template>
<script setup>
import { ref } from 'vue'
// 初始化 type 变量的值为 2
const type = ref(2)
</script>
运行结果如下:
v-show 指令
v-show
指令的用法与 v-if
基本一样,不同点在于 v-show
会改变元素的 CSS 属性 display
。当 v-show
中的表达式为 true
时,则会显示;为 false
时,则会隐藏,并应用样式为 display: none
。
示例代码如下:
<template>
<a href="https://www.quanxiaoha.com" v-show="isShow">犬小哈教程</a>
</template>
<script setup>
import { ref } from 'vue'
const isShow = ref(true)
</script>