Vue3条件语句

作者

Vue 3 条件语句完全指南

本文档从零开始讲解 Vue 3 里的条件语句：如何根据数据“为真/为假”来显示或隐藏内容，包括 v-if、v-else-if、v-else、v-show 的用法、区别、常见场景和易错点，配有大量示例，适合新手系统学习。

一、为什么需要“条件”？

页面上经常要根据不同情况显示不同内容，例如：

  • 已登录显示“欢迎回来”，未登录显示“请登录”
  • 成绩 ≥ 90 显示“优秀”，≥ 60 显示“及格”，否则“不及格”
  • 有数据时显示列表，没数据时显示“暂无数据”
  • 加载中显示骨架屏，加载完显示真实内容

在 Vue 里，这类逻辑不用手写 JavaScript 去改 DOM，只要在模板里用条件指令写出“什么时候显示什么”，Vue 会帮你自动更新视图。
这些“条件指令”就是本文要讲的条件语句。

二、条件指令有哪些？

Vue 3 中与“条件”相关的指令主要有：

指令 作用简述
v-if 条件为真时渲染这块 DOM，为假时不渲染（从 DOM 里移除）
v-else-if 紧跟在 v-if 或 v-else-if 后面，表示“否则如果……”
v-else 紧跟在 v-if 或 v-else-if 后面，表示“否则”
v-show 条件为真时显示元素，为假时用 CSS 隐藏（元素始终在 DOM 里）

下面逐个详细说明，并对比 v-if 和 v-show 该怎么选。

三、v-if：条件为真才渲染

3.1 基本用法

语法： v-if="表达式"
当表达式的值为真（truthy）时，这个元素会被渲染到页面上；为假（falsy）时，整块元素不会出现在 DOM 里。

<template>
  <div>
    <p v-if="isVisible">你能看见我</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>
  • isVisible 为 true 时，页面上有“你能看见我”。
  • 把 isVisible 改成 false，这句 <p> 会从 DOM 里消失（不是隐藏，是移除）。

哪些值是“假”？
在 Vue 里，下面这些都会被视为假：false、0、''（空字符串）、null、undefined、NaN。除此以外一般都为真。

3.2 表达式可以是变量，也可以是运算

v-if 里写的是单个 JavaScript 表达式，和 {{ }} 里能写的类型一样。

<template>
  <div>
    <p v-if="count > 0">有内容</p>
    <p v-if="name && name.length > 0">你好，{{ name }}</p>
    <p v-if="list.length">列表有 {{ list.length }} 项</p>
    <p v-if="type === 'admin'">管理员可见</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(5)
const name = ref('小明')
const list = ref([1, 2, 3])
const type = ref('admin')
</script>

四、v-else-if 与 v-else：多分支“否则如果 / 否则”

当有多种情况要分别显示不同内容时，可以用 v-if + v-else-if + v-else，和编程里的 if / else if / else 一一对应。

4.1 基本结构

  • v-else-if：必须紧跟在带 v-if 或 v-else-if 的元素后面，表示“如果上面条件都不满足，再判断这个条件”。
  • v-else：必须紧跟在带 v-if 或 v-else-if 的元素后面，不能写表达式，表示“上面条件都不满足时就走这里”。
<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const score = ref(85)
</script>
  • score 为 85：只显示“及格”（第一个为假，第二个为真）。
  • 改为 95：只显示“优秀”。
  • 改为 50：只显示“不及格”。

重要： v-else-if、v-else 必须和前面的 v-if / v-else-if 紧紧挨着，中间不能插入别的没有条件指令的标签，否则会报错或行为异常。

4.2 多分支示例：根据状态显示不同文案

<template>
  <div>
    <p v-if="status === 'loading'">加载中...</p>
    <p v-else-if="status === 'success'">加载成功</p>
    <p v-else-if="status === 'error'">加载失败，请重试</p>
    <p v-else>未知状态</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const status = ref('loading') // 可改为 'success'、'error' 等看效果
</script>

4.3 可以只有 v-if 和 v-else（两个分支）

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来</p>
    <p v-else>请先登录</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isLoggedIn = ref(false)
</script>

五、用