vue 中v-if 与v-show 的区别

相同点或者说功能，都可以动态操作dom元素的显示隐藏

不同点：

　　1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

　　2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

　　3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

　　4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

　　5.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

转载于:https://www.cnblogs.com/ralapgao/p/10528919.html

vue 中v-if 与v-show 的区别相关推荐

在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别 1.联动性:storge对于属性的改变不能触发其他页面的改动 storage: 存取login之后就不会改变的信息,比如userId, isAdmi ...
Vue中watch、computed、updated的区别
watch watch:侦听器,监听某个数据的变化然后执行相对应的方法,来响应数据的变化,尤其是当需要数据变化时执行异步操作或着开销较大时,这个方式是最有用的 <div id="wat ...
vue中slot,slot-scope,v-slot的用法和区别
以下仅为个人理解,若有不妥请留言评论区 v-slot 指令自 Vue 2.6.0 起被引入,在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持,但已经被 ...
vue中computed、metfods、watch的区别
一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...
vue中created、mounted、activated的区别
created:在模板渲染成html之前调用,即通常初始化某些属性值,然后再渲染成视图:但是注意,只会触发一次 mounted:在渲染成html之后调用,通常是初始化页面完成后,再对html的dom节 ...
vue中鼠标移入移出事件种类以及区别
1.@mouseover与@mouseout 鼠标经过时自身触发事件,其子元素同时也触发该事件. 父亲有的东西,儿子也有 ,支持冒泡. 适用于鼠标移入移出时子元素也会执行事件的场景,或者单一标签. 2 ...
谈谈 VUE 中 methods、watch 和 compute 三者之间区别和联系
本篇文章主要介绍了谈谈 VUE 中 methods.watch 和 compute 的区别和联系,具有一定的参考价值,有兴趣的可以了解一下 < 他三个是啥子关系呢?> ...
Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
Oracle 中一些主要的V$视图种类
Oracle 中一些主要的V$视图种类类别描述和相关的V$视图数据库实例有关实际数据库实例的信息 V$ 视图: V$ACTIVE_INSTANCES,V$BGPROCESS,V$DAT ...

vue 中v-if 与v-show 的区别

vue 中v-if 与v-show 的区别相关推荐

最新文章

热门文章