关于v-show和v-if

辰圆

于 2022-11-22 14:31:35 发布

阅读量184

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_54074788/article/details/127981770

版权

v-show标签：

                1.v-show指令的作用是：根据切换元素的显示状态
                2.原理是修改元素的display，实现显示隐藏
          3.指令后面的内容，最终都会解析为布尔值
          4.值为true元素显示，值为false元素隐藏

v-if标签：

                1.v-if指令的作用是：根据表达式的真假切换元素的显示状态
                2.本质是通过操纵dom元素来切换显示状态
          3.表达式的值为true,元素存在于dom树中，为false,从dom树中移除
          4.频繁的切换使用v-show,反之使用v-if,前者的切换消耗小

例如：在一个项目中，对于标签的引用可以使用v-show，也可以使用v-if。

使用v-shou标签时：会渲染出三个节点，但是不符合条件的节点会被display:none，这个层面的渲染是在样式的层面进行渲染。

<div class="task_describe" v-show="item.cardStudent == '1'">
    任务名称：{{item.cardName}}&nbsp;&nbsp;&nbsp;&nbsp;任务难度：学优
</div>
<div class="task_describe" v-show="item.cardStudent == '2'">
	任务名称：{{item.cardName}}&nbsp;&nbsp;&nbsp;&nbsp;任务难度：学中
</div>
<div class="task_describe" v-show="item.cardStudent == '3'">
	任务名称：{{item.cardName}}&nbsp;&nbsp;&nbsp;&nbsp;任务难度：学困
</div>

显示时

即有两个节点被隐藏起来了

当使用v-if标签时：只有符合条件的标签会被渲染出来，不符合条件的标签完全不被渲染，这个层面的渲染是在HTML层面进行的渲染。

<div class="task_describe" v-if="item.cardStudent == '1'">
	任务名称：{{item.cardName}}&nbsp;&nbsp;&nbsp;&nbsp;适合学生：学优
</div>
<div class="task_describe" v-if="item.cardStudent == '2'">
	任务名称：{{item.cardName}}&nbsp;&nbsp;&nbsp;&nbsp;适合学生：学中
</div>
<div class="task_describe" v-if="item.cardStudent == '3'">
	任务名称：{{item.cardName}}&nbsp;&nbsp;&nbsp;&nbsp;适合学生：学困
</div>

此时可以看到，项目代码只渲染出了一个节点。