Vue3 入门指北（五）条件渲染

前言

当我们想要条件性的渲染模板内容的时候，我们可以通过v-if这个指令来实现，当指令里面的表达式返回真值时进行渲染。如果你熟悉 vue 开发的话，你会发现这个指令非常好用，而且在某些场景下，能起到很好的优化效果。

template

通常情况下，我们会把v-if指令应用在某个标签上。但是如果我们有多个节点都要用到这个指令的时候，我们就可以把这些放在template标签中，把v-if应用在template标签上，而且最后渲染的时候并不会包含template标签的。

<template v-if="value">  <h1>小马</h1>  <p>小米</p>  <p>小红</p></template>

v-show

vue 中还提供了一个指令，能达到和v-if一样的展示效果：

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

不过，二者区别在于，v-show的切换只是在元素上加上一个display的 css 属性，也就意味着其 DOM 元素会保留。还有一点需要注意的是，v-show 不支持在 <template> 元素上使用。

v-if vs v-show

v-if指令的切换并不会保留 DOM 元素，其自身以及包括的内容的事件监听器等内容都会被销毁以及重建。

还有一点是，当v-if的初始值为 false 时，并不会渲染。所以，根据这一点，我们可以根据自己的场景，适当用v-if来优化页面初次渲染的逻辑。

综上，你可以区分，二者的主要区别。那么我们如何区分它的应用场景呢？

对于v-if来说，频繁切换的话，会带来更多的切换开销。而相应的， v-show 也会带来更高的初始渲染开销。

所以，如果需要频繁切换， v-show 食用更佳。而如果在运行时绑定条件很少改变，则 v-if 会更合适。