Vue 条件渲染

何以解忧，唯有..

342人浏览 · 2025-11-28 17:51:37

何以解忧，唯有.. · 2025-11-28 17:51:37 发布

一、前言

根据表达式的真假，决定是否把元素真正创建（或销毁）到 DOM 中。

例子：

<p v-if="show">你能看到我</p>

<script setup>
import { ref } from 'vue'
const show = ref(true)   // 变 false 时，<p> 会被销毁
</script>

配套指令：

指令	作用
`v-if`	条件为真才渲染
`v-else-if`	链式判断
`v-else`	其余情况

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

与 v-show 的区别：

对比项	v-if	v-show
初始假值	不渲染元素	渲染但 `display: none`
切换代价	创建/销毁 DOM	仅改 CSS
使用场景	很少切换	频繁切换

总结：v-if=“表达式” 为真时才把元素放进 DOM，为假就销毁；搭配 v-else-if / v-else 可做链式判断，适合“不常切换”的渲染场景。

二、代码示例

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

const awesome = ref(true)
const score = ref(80); // 初始“良好”
</script>

<template>

  <div id="app">
    <h3>当前分数：{{ score }}</h3>

    <!-- 链式条件渲染 -->
    <div v-if="score >= 90" class="box">🎉 优秀</div>
    <div v-else-if="score >= 75" class="box">👍 良好</div>
    <div v-else-if="score >= 60" class="box">✔ 及格</div>
    <div v-else class="box">❌ 不及格</div>

    <!-- 按钮：用来切换分数，直观感受 v-if 重新创建/销毁 DOM -->
    <button @click="score = 95">优秀</button>
    <button @click="score = 80">良好</button>
    <button @click="score = 65">及格</button>
    <button @click="score = 55">不及格</button>

    <!-- 成组条件渲染（template 标签自身不会被渲染） -->
    <template v-if="score >= 90">
      <p>可以参加奖学金评选</p>
      <p>老师请你喝奶茶</p>
    </template>
  </div>
</template>