vue- 指令v-if 与指令v-show的区别

快来打我* 2024-04-20 11:08 70阅读 0赞

**区别1：**

**v-if ：可以根据表达式的值在DOM中生成或移除一个元素。**

**v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”。**

测试一：皆为true时

![1048652-20190807231949275-143333124.png][]

测试2：v-if：false时，该标签被彻底移除DOM

![1048652-20190807232132166-479868577.png][]

测试3：皆为false时，v-if所在的标签彻底被移除DOM，v-show增加了内联样式display:none;

![1048652-20190807232415612-1544736371.png][]

测试4：

![1048652-20190807232531854-270972704.png][]

**区别2：**

**v-if:支持<template>语法；**

**v-show:不支持<template>语法**

**测试1：**

**![1048652-20190807233157073-316192826.png][]**

测试2：

![1048652-20190807233319050-1511449565.png][]

**注：一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换，则使用v-show更好。**

转载于:https://www.cnblogs.com/liuqingxia/p/11310598.html

[1048652-20190807231949275-143333124.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/800e871078de42fea1b49143243d1735.png
[1048652-20190807232132166-479868577.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2acf3483722f4595b90c6e93de0358e5.png
[1048652-20190807232415612-1544736371.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/30909c7c5bc84e35a168d07914158c74.png
[1048652-20190807232531854-270972704.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e929a66e9af04affa39c8ba978110725.png
[1048652-20190807233157073-316192826.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/247b45afbce74915b704b9564441fe0b.png
[1048652-20190807233319050-1511449565.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2e61ce11be6844f79104247438e98fbf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue- 指令v-if 与指令v-show的区别

*区别1：** **v-if ：可以根据表达式的值在DOM中生成或移除一个元素。** **v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋...

快来打我*/ 2024年04月20日 11:08/ 0 赞/ 71 阅读

相关 Vue指令

Vue指令 * v-text * v-html * v-show * v-if * v-else * v-else-if * v-for ...

迈不过友情╰/ 2024年04月17日 05:59/ 0 赞/ 89 阅读

相关 Vue---内置指令、自定义指令（详细）、全局指令与局部指令

目录一、v-on 二、v-bind、v-model 三、v-if、v-else、v-show、v-for 四、v-text、v-big 五、v-html 六、v-

一时失言乱红尘/ 2024年04月07日 12:56/ 0 赞/ 116 阅读

相关 vue 指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2023年11月05日 00:52/ 0 赞/ 118 阅读

相关 Vue指令

v-text v-text的作用跟插值表达式是一样的，但是不同的地方在于：v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

男娘i/ 2023年06月09日 07:59/ 0 赞/ 24 阅读

相关 vue指令

总结 v-text v-text是一个渲染文本的指令不能解析标签会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染

电玩女神/ 2023年02月22日 13:56/ 0 赞/ 35 阅读

相关 vue指令

vue指令一个正在努力爱好运动的前端座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- 文章目录

朱雀/ 2022年12月22日 06:12/ 0 赞/ 146 阅读

相关 vue指令

vue介绍 1.作者尤雨溪(vue) \[阿里\] 3.0 2.vue概念官网：[Vue.js][] 渐进式 JavaScript 框架渐进式：主

偏执的太偏执、/ 2022年09月16日 06:05/ 0 赞/ 166 阅读

相关 Vue指令

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ -------

待我称王封你为后i/ 2021年11月17日 13:10/ 0 赞/ 438 阅读

相关 Vue指令

Vue指令 1. watch监听在vue中watch就是时时刻刻的监听绑定的这个data模型数据，当这个数据发生变化的时候，watch就会被触发，自动的执行其中的

￡神魔★判官ぃ/ 2021年07月24日 19:31/ 0 赞/ 523 阅读