共同点： 都能控制元素的显示和隐藏；
不同点： 实现本质方法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了。
而且 v-if 不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用 v-show (切换开销比较小，初始开销较大)。
如果不需要频繁切换某节点使用 v-if（初始渲染开销较小，切换开销比较大）。
拓展：display:none 、visibility :hidden和 opacity:0的区别
display:none 隐藏，元素脱离文档流，元素不再占据页面空间，后面元素上前补位；
visibility:hidden 隐藏 ,不脱离文档流，页面不可见，但是占据位置。素仍旧存在，页面中无法触发该元素的事件
opacity:0: 元素透明度将为 0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。
面试题] Vue 中v-if和v-show的共同点和不同点有哪些? 首先v-if和v-show都是作用于视图层通过...
v-show和v-if指令的共同点和不同点？答: 共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-...
在 Vue.js 中，使用 v-if 和 v-show 指令来控制条件渲染。 1.二者的区别： v-show ：会...
我们可能需要先知道的 Vue 中自带默认指令（v-if 和 v-show 等），我们在使用 Vue 框架的时候，这...
共同点：v-if和v-show都是通过判断绑定数据的true\false来展示的 不同点：v-if只有在判断为tr...
一、v-show与v-if的共同点 我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含...
拓展：display:none 、visibility :hidden和 opacity:0的区别
指令 1、条件判断 v-if v-else v-show ### v-if 和v-show的区别： v-if：...
五、Vue的条件渲染（v-if、v-show、v-for指令）v-if（控制DOM的存在与否）、v-show（控制...
目标：显示或隐藏一段文本原理：v-if v-show分析：共同点：都可以通过该指令去控制文本的显示或者隐藏不同点...
本文标题：vue中v-if和v-show指令的共同点和不同点
本文链接：https://www.haomeiwen.com/subject/bnjjultx.html
网友评论