1. template标签的特性

template标签在 Vue 中是作为一个虚拟容器存在的。它的作用是对元素进行分组，不过在最终渲染的 DOM 里，不会保留这个标签本身。举个例子：

vue

<template>
  <div v-if="condition">显示内容1</div>
  <div>显示内容2</div>
</template>

在实际渲染时，得到的 DOM 结构是：

html

预览

<div>显示内容1</div>
<div>显示内容2</div>

2. v-show指令的工作原理

v-show指令的实现方式是通过修改元素的 CSS display属性来控制元素的显示或者隐藏。其原理可以简单理解成这样：

javascript

// 简化后的内部实现逻辑
if (condition) {
  element.style.display = ''; // 显示元素
} else {
  element.style.display = 'none'; // 隐藏元素
}

3. 为什么v-show不能用于template

由于template标签在渲染后不会出现在 DOM 中，所以给它添加v-show指令是没有意义的。打个比方：

vue

<template v-show="false">
  <div>内容</div>
</template>

经过渲染后，DOM 中就只剩下：

html

预览

<div>内容</div>

此时v-show指令没有对应的元素可以应用，自然也就无法发挥作用。

4. 替代方案

要是你想对多个元素进行条件性显示控制，可以使用v-if指令。因为v-if是通过完全销毁或重新创建元素来实现的，而不是单纯修改 CSS 属性。示例如下：

vue

<template v-if="condition">
  <div>内容1</div>
  <div>内容2</div>
</template>

当condition为false时，这些元素根本不会被渲染到 DOM 中。

总结

建议在需要对多个元素进行条件渲染时，优先考虑使用v-if配合template标签。

https://www.zuocode.com