template标签为什么不可以使用v-show?

myzbx 2025-09-14 23:24 5 浏览

前言

写 Vue 时，最容易踩的小坑之一，就是给 <template> 套一个 v-show。编辑器不报错，页面却“消失”了。很多人以为这是 bug，其实它只是 Vue 的底层设计在默默提醒：<template> 不是真节点，它只是个“草稿纸”。

一、为什么 <template> 拒绝 v-show

v-show 的本质是切换元素的 CSS：display: none。浏览器要找到真实 DOM 节点，才能给它加样式。而 <template> 在运行时会被完全剥离，不会留下任何标签，Vue 找不到节点，也就无处下刀。

举个反面教材：

<!--  无效示例 -->
<template v-show="false">
<p>我永远被渲染</p>
</template>

打开控制台，你会看到 <p> 还是生成了，但 v-show 的指令像从没来过。

二、官方的正确姿势

想按条件渲染一块区域，用 v-if：

<!--  有效示例 -->
<template v-if="show">
<p>只在 show 为 true 时出现</p>
</template>

想按条件展示一个真实节点，用 v-show：

<!--  有效示例 -->
<p v-show="show">我只是在隐藏/显示</p>

三、实战演练：弹窗小组件

需求：点击按钮，弹窗淡入淡出。
思路：弹窗需要保留 DOM（方便动画），所以外层用 div 套 v-show，内部用 <template> 组织结构。

<template>
<button @click="visible = !visible">切换弹窗</button>
<!-- 真实节点，可以 v-show -->
<transition name="fade">
<div v-show="visible" class="modal">
<!-- 内部用 template 纯粹排版 -->
<template>
<h3>温馨提示</h3>
<p>内容区域</p>
<button @click="visible=false">关闭</button>
</template>
</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: #fff;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
</style>

四、总结

<template> 只是编译时的“占位符”，别让它承担运行时样式切换的重任；该渲染就交给 v-if，该显隐就交给真实节点加 v-show。记住这句口诀，能少踩 80% 的坑

DOM 动画

template标签为什么不可以使用v-show?

前言

一、为什么 <template> 拒绝 v-show

二、官方的正确姿势

三、实战演练：弹窗小组件

四、总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用