Vue3 条件渲染

页面要不要显示某块内容，往往取决于数据条件。

没登录显示”登录”，登录了显示”退出”；购物车为空显示”空空如也”，否则显示列表。

Vue 用 v-if 系列和 v-show 来处理。

v-if：条件渲染

v-if 后面跟一个布尔表达式，为真才渲染；为假整块元素不渲染（DOM 里根本不存在）：

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

const status = ref('loading')
</script>

<template>
  <p v-if="status === 'loading'">加载中…</p>
  <p v-else-if="status === 'error'">加载失败，请重试</p>
  <p v-else>加载完成</p>
</template>

三个要点：

• v-else-if、v-else 必须紧跟在前一个 v-if/v-else-if 元素的后面，中间不能插别的元素，否则 Vue 匹配不上。
• v-else 不需要写判断条件，它表示”剩下的情况”。
• 判断条件可以是比较运算、变量、方法返回值等任何”能得出布尔值的表达式”。

多个元素

v-if 只能作用于一个元素，想一起控制多个元素，把它们装进 <template>， <template>不会渲染成任何 HTML 标签：

<template v-if="isLogin">
  <p>欢迎回来，{{ user.name }}</p>
  <button @click="logout">退出登录</button>
</template>

特殊取值

v-if="0" 和 v-if="''" 会怎样？

0、''、null、undefined 在 JS 里都是”假值”，会被当作不渲染。

习惯上建议写明确的布尔判断（如 v-if="count > 0"），代码更好读。

v-show：切换 display

v-show 的用法和 v-if 一样，但实现完全不同，为假时元素依然渲染，只是 display: none 隐藏起来。

<p v-show="isVisible">始终存在于页面，只是被隐藏</p>

v-show 不支持 <template> 包裹，也没有 v-else 配套。

v-show 不能用在 <template> 上，因为<template> 不产生真实元素，display: none 无处安放；多元素高频切换时，考虑把内容拆成子组件或直接用 v-if。

v-if vs v-show 怎么选

速查卡片