Vue3 条件语句（超详细）

Vue3 条件语句：让页面根据数据“思考”

在开发前端应用时，我们常常需要根据不同的数据状态来决定页面如何渲染。比如用户登录后显示“欢迎回来”，未登录则显示“请登录”；又或者根据订单状态显示“待发货”“已发货”“已完成”等提示。这些逻辑的本质，就是“条件判断”。而在 Vue 3 中，实现这类逻辑的核心工具就是 条件语句。

Vue 3 条件语句并不复杂，它基于 JavaScript 的逻辑表达式，通过模板语法中的指令来控制元素的显示与隐藏。掌握它，你就掌握了让页面“会思考”的能力。本文将带你从零开始，一步步理解 Vue 3 条件语句的用法，结合真实案例，让你真正“用起来”。

v-if：最直接的“开关”

v-if 是最基础、最常用的条件指令。它会根据表达式的真假，决定一个元素是否被渲染到 DOM 中。

想象一下，你家的灯有一个物理开关：开，灯亮；关，灯灭。v-if 就像这个开关——它不是让灯变暗，而是直接决定灯有没有被“插入”电路。

<template>
  <!-- 如果 isLogin 为 true，显示欢迎信息；否则不渲染 -->
  <div v-if="isLogin">
    欢迎回来，小明！
  </div>
</template>

<script setup>
// 定义一个布尔变量，控制是否登录
const isLogin = true; // 改为 false 可观察效果
</script>

✅ 重要提示：v-if 是“条件性渲染”，当条件为 false 时，元素不会被创建，也不会存在于 DOM 中。这与 v-show 有本质区别。

v-else 与 v-else-if：构建多分支逻辑

现实世界中的判断很少只有“是”或“否”两种情况。比如用户状态可能是：未登录、已登录、管理员。这时，v-else 和 v-else-if 就派上用场了。

它们必须紧跟在 v-if 或 v-else-if 后面，形成一个完整的条件分支结构。就像编程中的 if...else if...else 语句。

<template>
  <!-- 根据 userRole 判断显示不同内容 -->
  <div v-if="userRole === 'admin'">
    管理员面板，可以管理所有用户。
  </div>
  <div v-else-if="userRole === 'editor'">
    编辑者权限，可修改内容。
  </div>
  <div v-else>
    普通用户，仅可浏览。
  </div>
</template>

<script setup>
// 模拟用户角色
const userRole = 'editor'; // 可改为 'admin' 或 'user' 观察变化
</script>

💡 小贴士：v-else 和 v-else-if 必须紧接在 v-if 或 v-else-if 后面，中间不能插入其他元素或注释。

v-show：隐藏与显示的“快速切换”

与 v-if 不同，v-show 并不会移除元素，而是通过 display: none 来隐藏它。这就像你把一盏灯的开关拨到“关”，但灯本身还在电路里。

适用场景：频繁切换的元素，比如模态框、下拉菜单等。因为 v-show 不涉及 DOM 的创建与销毁，性能更高。

<template>
  <!-- 使用 v-show 控制是否显示 -->
  <div v-show="isVisible">
    这个内容会根据 isVisible 的值隐藏或显示。
  </div>

  <!-- 可以用按钮切换状态 -->
  <button @click="isVisible = !isVisible">
    切换显示状态
  </button>
</template>

<script setup>
// 定义一个布尔值控制显示
const isVisible = true;
</script>

⚠️ 注意：v-show 不支持 v-else 和 v-else-if，因为它的逻辑是“显示/隐藏”，而非“是否渲染”。

条件语句与列表渲染结合：动态控制项

在实际开发中，我们常需要根据条件决定是否显示某个列表项。比如，只显示“已完成”的任务。

Vue 3 提供了 v-if 与 v-for 结合使用的强大能力。注意，v-if 必须写在 v-for 前面，否则会报错。

<template>
  <!-- 遍历任务列表，只显示状态为 'done' 的任务 -->
  <ul>
    <li v-for="task in tasks" :key="task.id" v-if="task.status === 'done'">
      {{ task.title }} ✅
    </li>
  </ul>
</template>

<script setup>
// 模拟任务数据
const tasks = [
  { id: 1, title: '写日报', status: 'done' },
  { id: 2, title: '开会', status: 'pending' },
  { id: 3, title: '回复邮件', status: 'done' },
  { id: 4, title: '写代码', status: 'pending' }
];
</script>

📌 关键规则：当 v-if 与 v-for 同时使用时，v-if 必须写在 v-for 之前，否则 Vue 会抛出警告。

逻辑表达式与复杂条件判断

v-if 支持任意 JavaScript 表达式，这意味着你可以写复杂的逻辑判断。

比如，判断用户是否满足“登录且权限为管理员，或用户为超级用户”。

<template>
  <!-- 复杂条件判断：登录 + 管理员权限，或超级用户 -->
  <div v-if="isLogin && (userRole === 'admin' || isSuperUser)">
    您有高级权限，可以执行敏感操作。
  </div>
  <div v-else>
    权限不足，请联系管理员。
  </div>
</template>

<script setup>
// 模拟用户状态
const isLogin = true;
const userRole = 'admin';
const isSuperUser = false;
</script>

🧠 形象比喻：你可以把 v-if 的表达式看作一个“决策引擎”——它接收输入（变量），运行逻辑，输出“是否渲染”。

性能对比：v-if 与 v-show 如何选？

特性	v-if	v-show
渲染时机	条件为真才渲染	无论条件如何，始终渲染
DOM 操作	创建/销毁元素	修改 `display` 样式
初始开销	高（可能需要创建元素）	低（元素已存在）
适合场景	条件很少变化的元素	频繁切换显示状态的元素

✅ 推荐使用场景：

v-if：导航菜单、设置面板等不常切换的内容。
v-show：弹窗、标签页、下拉菜单等需要频繁显示隐藏的组件。

实际项目中的综合应用

我们来看一个完整的例子：一个用户信息卡片，根据登录状态和角色显示不同内容。

<template>
  <div class="user-card">
    <!-- 登录状态判断 -->
    <div v-if="isLogin">
      <h3>用户信息</h3>
      <p>姓名：{{ userName }}</p>
      <p>角色：{{ userRole }}</p>

      <!-- 角色权限判断 -->
      <div v-if="userRole === 'admin'">
        <button @click="handleDeleteUser">删除用户</button>
      </div>
      <div v-else-if="userRole === 'editor'">
        <button @click="handleEditContent">编辑内容</button>
      </div>
      <div v-else>
        <p>您没有管理权限。</p>
      </div>
    </div>

    <!-- 未登录状态 -->
    <div v-else>
      <p>请先登录以查看个人信息。</p>
      <button @click="handleLogin">立即登录</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式数据
const isLogin = ref(true);
const userName = ref('小明');
const userRole = ref('admin');

// 模拟操作
const handleLogin = () => {
  isLogin.value = true;
};

const handleDeleteUser = () => {
  alert('用户删除成功！');
};

const handleEditContent = () => {
  alert('正在进入编辑模式...');
};
</script>

<style scoped>
.user-card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  max-width: 300px;
}
</style>

🎯 实战价值：这个例子融合了 v-if、v-else-if、v-show（可扩展）、响应式数据和事件处理，是 Vue3 条件语句的典型应用场景。

总结：掌握 Vue3 条件语句的思维

Vue3 条件语句不是简单的语法糖，而是你构建“智能界面”的基石。通过 v-if、v-else、v-else-if、v-show，你可以让页面根据数据动态变化，实现真正的交互逻辑。

记住：

v-if 是“开关”——决定是否渲染。
v-show 是“隐形开关”——隐藏但不销毁。
复杂条件用逻辑表达式，结构清晰才能维护。
频繁切换用 v-show，不常切换用 v-if。

当你能熟练运用这些指令时，你就不再是“写代码的人”，而是“设计体验的人”。

Vue3 条件语句，让页面真正“会思考”。