简单懂得vue中的v-if和v-show的差别

发布时间: 2019-10-08 11:33:54 来源: 互联网 栏目: JavaScript 点击:

这篇文章重要简介了简单懂得vue中的v-if和v-show的差别,文中经过过程示例代码简介的异常详细,对大年夜家的进修或许任务具有必定的参考进修价值,须要的同伙可以参考下

v-if和v-show的差别是前端面试中常问的基本知识点,v-if、v-show望文生义就是用来断定视图层展示后果的。那么详细是怎样展示呢?v-if和v-show的差别又是甚么呢?

起首我们可以来看一下Vue中文社区解释文档的简介:

Vue中文社区解释文档中简单来讲是:初始衬着的时辰停止条件断定展示;

在实际开辟中我们会常常应用到v-if和v-show来停止断定展示,我们可以这么懂得:

<div class="tc" v-if="pload && list.length<1" >
  <img src="../assets/img/mall_none_order.png" />
</div>

下面的实例中,v-if的感化是经过过程pload和list.length能否<1来断定这个div能否展示,由因而并且关系,只要当pload和list.length<1两个成立都成立的时辰这个div和外面的img才展示和失效,

反之假设断定条件不成立的时辰,v-if则不会展示;

<div class="tc" v-show="pload && list.length<1" >
  <img src="../assets/img/mall_none_order.png" />
</div>

下面的案例代码我们其实也能够换成v-show来停止断定,视觉后果也是一样的;留意: 只是视觉后果是一样的,二者之间不是等于的关系(前面来停止分析);用v-show来断定条件pload为真并且list.length<!的时辰才成立,div和div外面的img标签才失效;

下面说到v-if和v-show都能完成根据断定条件停止展示的后果,然则这不代表这二者是等于的关系;仅仅只是视觉后果雷同罢了,下面我们来讲讲v-if和v-show的差别及留意事项:

应用v-if,我们可以留意到浏览器并没有衬着到元素class为tc的div,这是由于v-if只要当断定条件为真时,浏览器才会生成标签并在浏览中衬着,反之断定条件为假时,浏览器将不会生成标签更不会衬着。

那么我们可以想想,在条件为假的时辰浏览器不生成标签不衬着,条件为真的时辰浏览器才衬着,如许是否是很消费页面性能呢?

假设我们的断定条件不只要一种场景而是有多种场景呢?那么这时候怎样办呢?Vue给我们供给了v-else指令,v-else是v-if的专属指令,v-else只能和v-if一路连用;

假设我们应用v-show停止断定衬着,则div标签和外面的img是会生成并衬着的,然则我们留意到浏览器在我们的内联款式中添加了display:none属性,所以本质上v-show标签是存在的,只是浏览器帮我们隐蔽了罢了;实际上浏览器只是根据断定条件在更改内联款式,条件为真的时辰内联款式display:block;条件为假的时辰内联款式更改成display:none; v-show实际上比v-if的性能更高,由于v-show只是静态的更改款式而不须要增删DOM元素,然则碰到多种情况分支断定的时辰v-show是不克不及和v-else连用的,碰着这类场景应用v-show的处理办法就是重新再用v-show写别的的逻辑断定;

总结:

(1)、v-if和v-show用于视图层停止条件断定视图展示

(2)、v-if的道理是根据断定条件来静态的停止增删DOM元素,v-show是根据断定条件来静态的停止显示和隐蔽元素,频繁的停止增删DOM操作会影响页面加载速度和性能,由此我们可以得出结论:

当您的项目法式榜样不是很大年夜的时辰,v-if和v-show都可以用来停止断定展示和隐蔽(这类场景应用v-if只是影响不大年夜,其实不是没有影响);

当您的项目法式榜样比较大年夜的时辰,不推荐应用v-if来停止断定展示和隐蔽,推荐应用v-show;

 (3)、只要v-if能和v-else连用停止分支断定,v-show是不克不及和v-else连用的,假设出现多种条件场景的情况下,可以应用v-if来停止断定

以上就是本文的全部内容,欲望对大年夜家的进修有所赞助,也欲望大年夜家多多支撑我们。

本文标题: 简单懂得vue中的v-if和v-show的差别
本文地址: http://yourctp.com/wangluo/javascript/277806.html

假设认为本文对您有所赞助请赞助本站

付出宝扫一扫赞助微信扫一扫赞助

  • 付出宝扫一扫赞助
  • 微信扫一扫赞助
  • 付出宝先领红包再赞助
    声明:凡注明"本站原创"的一切文字图片等材料,版权均属编程客栈一切,迎接转载,但务请注明出处。
    vue-cli和v-charts完成可视化图表过程解析关于JSON解析的完成过程解析
    Top