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 显示效果

QQ20210218-133027@2x.png

总结:如果使用了 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 显示效果

QQ20210218-133652@2x.png

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

最后修改:2021 年 02 月 18 日 01 : 39 PM