你可能被 Vue 中的 v-show 骗了，它并没有像你想的那样切换 display 的属性

news2024/11/13 10:46:30

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注！

在 Vue 中 v-show 是如何条件性地渲染内容的，你可能知道是通过切换 display 属性实现，但真的跟你想的一样吗？

一、你被骗了吗？

v-show 和 v-if 指令都是用于条件性地渲染一块内容，但表达式的值为真时，显示内容，为假时，隐藏内容。

对于两者的区别，你应该也了如指掌：v-if 是真正的条件渲染；v-show 始终会被渲染，只有 CSS display 属性会被切换。

不知道你是怎么理解 “只有 CSS display 属性会被切换” ？如果你是觉得将 display 的属性，如 “block”、“inline-block”、“flex"等，是在表达式为真时，将它们切换为"none”，在表达式为假时，将它们切换回来。那么，你就被骗了！如果你没有被骗，那就没有继续往下看的必要了。

我们先看下 Vue 官方文档关于 v-show 的介绍。

二、v-show

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：

<h1 v-show="ok">Hello!</h1>

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

以上内容摘自 Vue 官方文档的 “条件渲染” 章节。上面明确指出，v-show 仅切换了名为 display 的 CSS 属性。

三、拨开迷雾

我们使用简单的代码，对 v-show 进行测试。

App.vue

<script setup>
  import { ref } from "vue";

  const msg = ref("hello world");
  const show = ref(true);
</script>

<template>
  <div>
    <p v-show="show">{{ msg }}</p>
    <button @click="show = !show">切换</button>
  </div>
</template>