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

v-if是动态对dom添加或删除dom元素

v-show是对dom元素的display属性进行控制显示隐藏（简单的css切换）

如果子组件使用 v-if 显示隐藏，v-if 的值为 false 时，是获取不到 this.$refs.该子组件的。

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

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

Tips：

（1）如果v-show作用的元素，css文件中display:none，通过v-show进行设置不能显示该元素；

原因：

v-show控制显隐，是通过js代码去修改元素的element style，如果value为false，设置display: none; 如果value为true，设置display: ''；于是value为true时，只能将element style中的display效果清除，并不能覆盖css中的display效果；

如下图所示，value=true时，v-show改变的是element.style，由于无效，显示效果由css文件中的display决定。

解决办法：使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。

<ul style="display: none" v-show="show">复制代码

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

Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
在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 v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
关于v$process与v$session中process的理解(转载)
http://www.itpub.net/thread-1077321-1-1.html(出处) 关于v$process与v$session中process的理解说明 v$session有个proc ...

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

v-if是动态对dom添加或删除dom元素

v-show是对dom元素的display属性进行控制显示隐藏（简单的css切换）

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

最新文章

热门文章