Vue.js 条件语句（完整教程）

Vue.js 条件语句：让页面“聪明”起来

你有没有遇到过这样的场景？用户登录后，页面显示“欢迎回来”，未登录时却显示“请登录”；某个按钮只在特定条件下才出现；表单验证失败时，提示信息才显示出来。这些动态变化的背后，其实都依赖于一个核心能力——条件判断。

在 Vue.js 中，这种“根据条件决定是否渲染内容”的机制，就是我们今天要深入探讨的 Vue.js 条件语句。它就像页面的“大脑”，让前端界面不再静态，而是能响应数据变化，做出智能决策。

Vue 提供了多种方式来实现条件语句，从最基础的 v-if 到更灵活的 v-show，再到组合式 API 中的 v-if 与 v-else 的组合使用。掌握它们，你就掌握了构建动态交互页面的钥匙。

v-if：真正“创建与销毁”的条件渲染

v-if 是最常用、最直观的条件指令。它的核心逻辑是：当表达式为 true 时，才将对应元素插入 DOM；为 false 时，完全从 DOM 中移除。这种“创建与销毁”的机制，意味着它对性能有一定影响，但非常适合用于那些不会频繁切换的条件内容。

我们来看一个典型的例子：

<template>
  <div>
    <!-- 用户状态控制显示内容 -->
    <p v-if="isLoggedIn">欢迎回来，管理员！</p>
    <p v-if="!isLoggedIn">请先登录才能查看内容。</p>

    <!-- 按钮的显示也依赖于状态 -->
    <button v-if="isLoggedIn" @click="logout">退出登录</button>
  </div>
</template>

<script setup>
// 定义一个响应式状态，用于控制用户登录状态
import { ref } from 'vue'

const isLoggedIn = ref(false) // 初始状态为未登录

// 模拟登录操作
const login = () => {
  isLoggedIn.value = true // 更新状态，触发视图更新
}

// 模拟退出操作
const logout = () => {
  isLoggedIn.value = false
}
</script>

代码解析：

• v-if="isLoggedIn"：当 isLoggedIn 为 true 时，才渲染该 <p> 元素。
• v-if="!isLoggedIn"：当用户未登录（即 isLoggedIn 为 false）时显示提示。
• v-if="isLoggedIn" 也控制按钮的显示，只有登录后才出现“退出登录”按钮。
• ref(false) 创建一个响应式变量，其值变化会自动触发视图更新。

💡 小贴士：v-if 会完全移除或重新创建元素，所以它适合用于条件不常切换的场景。比如用户权限控制、模块加载等。

v-else 与 v-else-if：多分支条件判断

当你需要实现“如果 A，否则如果 B，否则 C”的逻辑时，v-else 和 v-else-if 就派上用场了。它们必须紧跟在 v-if 或 v-else-if 后面使用，形成一个完整的条件判断链。

<template>
  <div>
    <!-- 根据用户等级显示不同欢迎语 -->
    <p v-if="userLevel === 'vip'">尊贵的 VIP 用户，欢迎光临！</p>
    <p v-else-if="userLevel === 'regular'">普通用户，欢迎回来！</p>
    <p v-else>新用户，欢迎注册！</p>

    <!-- 模拟不同用户等级切换 -->
    <button @click="changeLevel('vip')">升级为 VIP</button>
    <button @click="changeLevel('regular')">恢复为普通用户</button>
    <button @click="changeLevel('new')">注册为新用户</button>
  </div>
</template>

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

// 定义用户等级状态，初始为新用户
const userLevel = ref('new')

// 切换用户等级的函数
const changeLevel = (level) => {
  userLevel.value = level // 更新状态，视图自动刷新
}
</script>

关键点：

• v-else-if 必须紧跟在 v-if 后面，不能独立使用。
• v-else 不能有表达式，它代表“其他情况”。
• 每个条件分支只执行一次，按顺序匹配，一旦命中就不再判断后续条件。

🎯 类比理解：这就像你去餐厅点餐，菜单上写着“如果点牛肉，就加一份蒜蓉西兰花；否则如果点鸡肉，就加一份青椒炒蛋；否则默认加一份凉拌黄瓜”。v-if、v-else-if、v-else 就是这个逻辑的实现。

v-show：隐藏与显示的“开关”

与 v-if 不同，v-show 不会创建或销毁 DOM 元素，它只是通过 CSS 的 display 属性来控制元素的显示或隐藏。也就是说，无论条件如何，元素始终存在于 DOM 中。

<template>
  <div>
    <!-- 使用 v-show 控制弹窗的显示 -->
    <div v-show="showModal" class="modal">
      <p>这是一个模态框，点击按钮可关闭。</p>
      <button @click="showModal = false">关闭</button>
    </div>

    <!-- 按钮控制模态框显示 -->
    <button @click="showModal = true">打开模态框</button>
  </div>
</template>

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

// 控制模态框是否显示
const showModal = ref(false)
</script>

对比说明：

• v-if：条件为 false 时，元素从 DOM 中彻底移除，节省内存。
• v-show：条件为 false 时，元素仍在 DOM，只是 display: none，切换更快。

✅ 适用场景：

• 条件频繁切换（如开关、下拉菜单）。
• 元素结构复杂，创建/销毁成本高。
• 需要保持元素状态（如输入框内容、焦点等）。

⚠️ 注意：不要用 v-show 来控制大量初始隐藏的元素，这会增加页面初始渲染负担。

多个条件组合：逻辑运算符在 Vue.js 条件语句中的应用

Vue 支持在条件表达式中使用 JavaScript 的逻辑运算符，实现更复杂的判断逻辑。比如 &&、||、! 等。

<template>
  <div>
    <!-- 多条件判断：用户既登录又为管理员才显示管理按钮 -->
    <button
      v-if="isLoggedIn && userRole === 'admin'"
      @click="openAdminPanel"
    >
      进入管理后台
    </button>

    <!-- 显示提示信息：用户未登录或角色不匹配 -->
    <p v-if="!isLoggedIn || userRole !== 'admin'">
      您没有权限访问管理功能，请确认登录状态。
    </p>

    <!-- 使用三元表达式进行更复杂的判断 -->
    <p>
      您当前的状态是：
      {{ isLoggedIn ? (userRole === 'admin' ? '管理员' : '普通用户') : '未登录' }}
    </p>
  </div>
</template>

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

// 模拟用户状态
const isLoggedIn = ref(true)
const userRole = ref('user') // 可改为 'admin' 测试

const openAdminPanel = () => {
  alert('已进入管理后台')
}
</script>

逻辑说明：

• isLoggedIn && userRole === 'admin'：两个条件都为真时才显示按钮。
• !isLoggedIn || userRole !== 'admin'：任一条件为真就显示提示。
• 三元表达式 ? : 在模板中直接使用，实现“条件赋值”。

📌 建议：复杂逻辑尽量放在 computed 或 methods 中，保持模板简洁。

实际项目中的最佳实践建议

在真实项目中，如何选择合适的条件语句？这里给出几个关键建议：

🛠 进阶技巧：将复杂的条件判断提取到 computed 中，可以极大提升代码可维护性。

// 示例：将条件判断封装为计算属性
const isAllowedToAccess = computed(() => {
  return isLoggedIn.value && userRole.value === 'admin'
})

然后在模板中使用：

<button v-if="isAllowedToAccess">进入管理后台</button>

总结：让界面“会思考”的能力

Vue.js 条件语句是构建动态、交互式前端页面的核心能力。v-if 像一位“严谨的建筑师”，只在需要时才搭建结构；v-show 像一位“灵活的管家”，随时切换开关；而 v-else 和 v-else-if 则让判断逻辑变得像自然语言一样清晰。

掌握这些指令的使用场景和性能差异，不仅能写出更高效的代码，还能让界面真正“理解”用户的状态和行为，从而提供更流畅的体验。

当你能熟练运用 Vue.js 条件语句时，你就不再只是写 HTML 和 JS，而是在设计一个“会思考”的数字世界。这正是现代前端开发的魅力所在。