vue动态显示DOM元素常用两种方式：v-show 和 v-if，但这两种是有区别的。
| 区别 | v-if | v-show | 备注 |
|---|---|---|---|
| 实现方式 | 动态地向DOM树内添加或者删除DOM元素 | 设置DOM元素的display样式属性来控制显隐(display="none") | - |
| 编译过程 | 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) | 控制css进行切换 | - |
| 编译条件 | 初始值为false就不编译；只有在第一次条件变为真时才开始局部编译 | 在任何条件下（首次条件是否为真）都被编译 | - |
| 性能消耗 | 不停的销毁和创建 | 只编译一次，保留DOM元素，之后通过控制css来控制显隐 | v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低（v-show性能更好一点） |
| 使用场景 | 适合条件不大可能改变 | 适合频繁切换 | v-if更灵活 |
1、v-show和v-if区别？ v-show判断节点是否隐藏 v-if 判断节点是否渲染 2、vue中key的作...
1、v-if与v-show的区别 条件渲染 (使用v-if) 条件展示 (使用v-show) 2、关于vue中Wa...
在 Vue.js 中，使用 v-if 和 v-show 指令来控制条件渲染。 1.二者的区别： v-show ：会...
标签： vue vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。 实现本质方法区别vue-s...
指令 1、条件判断 v-if v-else v-show ### v-if 和v-show的区别： v-if：...
VUE 1、v-show和v-if的区别2、为何v-for中要用key3、描述Vue组件生命周期（有父子组件的情况...
vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。实现本质方法区别 vue-show本质就是标...
Vue面试题 未经允许 禁止转载 1. v-if和v-show的区别 v-show是通过CSS的display来控...
v-if && v-show && v-else v-if和v-show的区别：v-if 判断是否加载，如果时fa...
v-if有关的面试题目：Vue中的v-show和v-if怎么理解？为什么Vue中的v-if和v-for不建议一起用...
本文标题：Vue中v-show和v-if的区别
本文链接：https://www.haomeiwen.com/subject/hqwcphtx.html
网友评论