码迷,mamicode.com
首页 > 其他好文 > 详细

【vue】v-if和v-show的区别

时间:2018-12-08 13:21:00      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:就是   show   基于   创建   技术   http   频繁   dom节点   消失   

今天来捋一下vue中的v-if与v-show的区别

  1. 先来看一下vue官方文档对他们的解释

技术分享图片

  2.从实现方式来看:

    v-if是当依赖的值变为false时,直接让元素消失,html代码也会消失,相当于直接在DOM树上把此节点删除了,

      而当值为true时,页面会重新渲染div;,也就是从新创建了DOM节点

    v-show是基于css切换来实现元素的显示和隐藏,即只是将元素css属性设为了display:none 或display:block

 

 

  3.使用场景:

    由于v-if是惰性的,如果初始渲染时条件为假,则什么也不做;只有在条件第一次变为真时才开始渲染,

    v-if有更高的切换开销,而v-show有更高的初始渲染开销

    因此我们常把v-if用于条件改变不频繁的场景,将v-show用于频繁切换的场景

 

  4.v-else和v-else-if

    可以用v-else来表示 v-if 的else 块,(v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。)

    可以用v-else-if充当else if模块。可以连续使用(类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。)

    

【vue】v-if和v-show的区别

标签:就是   show   基于   创建   技术   http   频繁   dom节点   消失   

原文地址:https://www.cnblogs.com/lyx183/p/10086919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!