Vue3 条件语句

页面经常需要根据数据的不同状态显示不同内容，比如"登录后显示用户名、未登录显示登录按钮"。Vue3 提供 v-if、v-else-if、v-else、v-show 等指令，让我们用数据来控制元素的显示与隐藏，这就是条件渲染，是"数据驱动界面"的第一步。

v-if 基础用法

v-if 指令接收一个表达式，表达式为真（truthy）时元素才会被渲染进页面；为假时整个元素连同它的子元素都不会出现在 DOM 中。

<template>
  <p v-if="isShow">你好，Vue3！</p>
</template>

<script setup>
const isShow = true
</script>

上面代码中 isShow 为 true，页面会显示"你好，Vue3！"；把 isShow 改成 false 后，<p> 标签会直接从 DOM 中消失。

v-else-if 与 v-else

v-if 可以配合 v-else-if、v-else 组成完整的判断分支，用法与 JavaScript 的 if/else if/else 一致。

<template>
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>
</template>

<script setup>
const score = 85
// 效果：页面只显示"及格"
</script>

注意三点：v-else-if、v-else 必须紧跟在 v-if 所在元素之后，中间不能插入其他元素；判断从上往下执行，命中一个分支后其余不再判断；v-else 本身不需要写表达式。

用 template 包裹多个元素

当一个条件要同时控制多个元素时，可以把 v-if 写在 <template> 标签上，这样不会额外产生一个真实的 DOM 节点。

<template>
  <template v-if="hasLogin">
    <p>用户名：admin</p>
    <button @click="logout">退出登录</button>
  </template>
  <p v-else>请先登录</p>
</template>

<script setup>
const hasLogin = true
// 效果：页面渲染出用户名和退出按钮两个元素
</script>

v-show 与 v-if 的区别

v-show 的写法与 v-if 类似，但原理不同：v-show 的元素始终保留在 DOM 中，只是通过 display: none 隐藏；v-if 则是直接把元素从 DOM 移除。

<template>
  <p v-show="isShow">通过 display 控制显隐</p>
  <p v-if="isShow">通过移除/重建控制显隐</p>
</template>

切换频繁时优先用 v-show，省去反复创建与销毁的开销；初始条件可能为假、很少切换时优先用 v-if，初次不渲染可以加快首屏。

小结

条件渲染让界面随数据自动变化：分支判断用 v-if / v-else-if / v-else，只做显隐切换用 v-show，批量控制多个元素用 <template> 包裹。下一节我们学习循环语句 v-for，把列表数据批量渲染成页面元素。