1.当我们想要隐藏掉一块div时，可以这样使用

1.1 代码

<div class="out" v-if="false">
    <h1>Vue学习</h1>
        <p>Web前端开发</p>
        <b>作者:微风</b>
</div>
  
<div class="out" v-else>
       <h1>Java学习</h1>
       <p>后端学习</p>
       <b>作者:微风轻轻吹拂</b>
</div>

1.2 显示效果

当我们想要隐藏一块整块元素，又不要div标签时，我们可以使用 template标签来帮助我们隐藏

1.3 使用template标签，来隐藏区域。代码

<template class="out" v-if="false">
    <h1>Vue学习</h1>
    <p>Web前端开发</p>
    <b>作者:微风</b>
</template>

<template class="out" v-if="false">
    <h1>Java学习</h1>
    <p>后端学习</p>
    <b>作者:微风轻轻吹拂</b>
</template>

1.4 显示效果

总结：如果使用了 template标签，该标签不会渲染到界面中，因此类名就不会有任何的意义。

2. v-if和v-show都可以隐藏和显示元素，其中有什么不同呢

2.1 代码

<!-- v-if 从dom中将其移除掉 -->
<h2 v-if="false">Vue学习1</h2>
<!-- v-show 通过css样式将标签隐藏 -->
<h2 v-show="false">Vue学习2</h2>

2.2 显示效果

总结：从控制台我们可以看见 v-if是将整个标签从DOM元素中移除掉了，而 v-show则是修改了标签的css样式。关于两者的性能v-show要好于v-if