本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： [b]1.共同点[/b] 都是动态显示DOM元素 [b]2.区别[/b] （1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； （2）编译过程：v-if切换有[b]一个局部编译/卸载的过程[/b]，切换过程中[b]合适地销毁和重建内部的事件监听和子组件[/b]；v-show只是简单的基于css切换； （3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有[b]在条件第一次变为真时才开始局部编译[/b]（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，[b]然后被缓存[/b]，而且DOM元素保留； （4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗； （5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。  [b]Tips： [/b]（1）如果v-show作用的元素，css文件中[code]display:none[/code]，通过v-show进行设置不能显示该元素； 原因：v-show控制显隐，[b]是通过js代码去修改元素的element style[/b]，如果value为false，设置[code]display: none;[/code][b]如果value为true，设置display: [/b]''；于是value为true时，只能将[code]element style[/code]中的display效果清除，并不能覆盖css中的display效果； 如下图所示，[code]value=true[/code]时，v-show改变的是[code]element.style[/code]，由于无效，显示效果由css文件中的display决定。 [img]http://files.jb51.net/file_images/article/201706/201762295928499.jpg?201752210116[/img]   [b]解决办法：[/b] 使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。 [code]<ul v-touch:tap="message=2" style="display: none" v-show="show">[/code] [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。