这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

这篇文章我们来讲一下v-show和v-if、v-else-if、v-else怎么去使用，使用它们的时候需要注意什么，以及它们之间的差异是什么。

v-show

v-show的用法

v-show 只是简单地切换元素的 CSS property display。

假定一个布尔值数据isShow=true，我们可以如下使用：

<h1 v-show="isShow">hello</h1>

其本质是改变h1的display值，如下：

document.querySelector("h1").style.display="none"

当然获取元素的方法你可以选择你喜欢的，这里用的querySelector获取h1（此处h1标签唯一，如果不唯一是不可以这样使用的）。在使用v-show的时候，我们需要注意，v-show 不支持 <template> 元素。如果你用在<template> 元素上，将会发生下面的情况：

编译前

<template  v-show="isShow">
    <div>hello</div>
</template>

编译后

从图片中可以看出，无论isShow的值怎么改变，template的样式始终为display:none,所以在使用v-show的时候我们需要注意这一点。

v-if、v-else-if、v-else

v-if、v-else-if、v-else的用法

根据表达式的真假值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提取它的内容作为条件块。

假定一个布尔值数据isShow以及你想渲染的dom（<div>world</div>）,如果isShow=ture，dom结构中有这行代码；如果isShow=false，dom结构中则没有这行代码。

如果我们想切换多个元素呢？此时，我们需要用<template>元素包裹，并在上面使用 v-if。下面让我们看看他们发生了什么？

编译前

<template  v-if="isShow">
    <div>hello</div>
    <div>world</div>
</template>

编译后此时，isShow=true，显示template里面的内容

<div>hello</div>
<div>world</div>

编译后此时，isShow=false，不显示dom

<!--v-if-->

v-else-if、v-else的注意事项

1. v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后。

2. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

总结

官方说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

对于上述说法，我们遵守当然是好的，但是在实际开发中，也需要根据功能需要来使用，这个就需要自己去界定。

想了解更多文章，传送门已开启：回首Vue3目录篇 ！