vue中v和v-show的区别是什么

  介绍

本篇文章给大家分享的是有关vue中v和v-show的区别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强> v vs v-show

v是“真正的“条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show就简单得多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换。

一般来说,v如果有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件不太可能改变,则使用v较好。

& lt; template>   & lt;才能div  id=癮pp"比;   ,,,& lt; div  v=癷sIf"比;   ,,,,如果   ,,,& lt;/div>   ,,,& lt; div  v-show=癷fShow"比;   ,,,,,   ,,,& lt;/div>   ,,,& lt; button  @click=皌oggleShow"祝辞toggle   & lt;才能/div>   & lt;/template>      & lt; script>   export 才能;default  {   ,,,的名字:,& # 39;应用# 39;   ,,,的数据(),{   ,,,,,return  {   ,,,,,,,isIf :,真的,   ,,,,,,,ifShow :,真的,   ,,,,,,,loginType :,“username"   ,,,,,}   ,,,},   ,,,方法:,{   ,,,,,toggleShow :,函数(){   ,,,,,,,this.ifShow =, this.ifShow  ?, false :,真的;   ,,,,,,,this.isIf =, this.isIf  ?, false :,真的;   ,,,,,}   ,,,}   ,,}   & lt;/script>

看铬控制台能更明显的看出来

 vue中v和v-show的区别是什么

对比可以看出v直接从代码中删除了,v-show只是通过显示来切换状态,因此建议频繁切换的话用v-show比较好

以上就是vue中v和v-show的区别是什么,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

vue中v和v-show的区别是什么