如何正确使用v-show/v-if切换模板？解决内容始终显示问题

核心问题 #

你在单文件组件的根<template>标签上直接使用v-show，这是无效的。Vue单文件组件的根<template>是组件的顶层包裹容器，不会解析它身上的指令，因此无论showTemplate的值如何切换，内部内容都会持续渲染显示。

v-show的正确用法 #

将v-show应用到组件内部的DOM元素或组件标签上，而非根<template>。修改后的HelloWorld组件代码如下：

<template>
  <!-- 把v-show绑定在内部容器元素上 -->
  <div class="hello" v-show="showTemplate">
    {{ msg }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showTemplate = ref(false)
</script>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

v-if的正确用法 #

v-if的使用逻辑和v-show一致，同样不能直接作用于根<template>。如果需要惰性渲染（仅当条件为真时才渲染内容），可以用内部的<template>标签作为容器包裹内容，再给这个容器添加v-if：

<template>
  <!-- 内部template容器使用v-if控制渲染 -->
  <template v-if="showTemplate">
    <div class="hello">
      {{ msg }}
    </div>
  </template>
  <!-- 可选：条件为假时显示的替代内容 -->
  <div v-else>
    内容已隐藏
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showTemplate = ref(false)
</script>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

v-show与v-if的核心差异 #

• 渲染机制：
  • v-show：始终渲染DOM元素，通过CSS的display: none控制显示/隐藏，初始渲染会加载所有内容。
  • v-if：惰性渲染，仅当条件为真时才渲染对应内容，条件切换时会销毁/重建DOM元素，适合切换频率低的场景。
• 性能开销：
  • 频繁切换场景下，v-show性能开销更低（仅CSS属性切换）。
  • 初始条件为假或切换频率低时，v-if更节省初始渲染资源。

内容的提问来源于stack exchange，提问作者Amrmsmb