交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • vue中v-show和v-if的异同及v-show用法

    一、官方解释:

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

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

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

    4.一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-

    show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    二、个人理解:

    1.相同点:v-show和v-if都能控制元素的显示和隐藏。

    2.不同点:

    •实现本质方法不同 ◦v-show本质就是通过设置css中的display设置为none,控制隐藏

    ◦v-if是动态的向DOM树内添加或者删除DOM元素

    •编译的区别 ◦v-show其实就是在控制css
    ◦v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

    •编译的条件 ◦v-show都会编译,初始值为false,只是将display设为none,但它也编译了
    ◦v-if初始值为false,就不会编译了

    •性能 ◦v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。
    ◦注意点:因为v-show实际是操作display:" "或者none,当css本身有display:none时,v-show无法让显示
    ◦总结:如果要频繁切换某节点时,使用v-show(无论true或者false初始都会进行渲染,此后通过css来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用v-if(因为懒加载,初始为false时,不会渲染,但是因为它是通过添加和删除dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)

    vue指令之v-show的用法

    1、判断谋个元素是否显示或隐藏

    <el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上传<i class="el-icon-upload el-icon--right"></i></el-button>

    通过接口里的参数list.power是否等于1,如果等于1,则为“true”,否则为“false”,然后v-show指令,等于true的时候显示,false的时候隐藏。

    2、三目运算符判断

    <a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>

    其实这个也可以简写成第一种形式

    <a class="warn" v-show="!item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>

    这样更简单哦

    总结

    以上所述是小编给大家介绍的vue中v-show和v-if的异同及v-show用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
    • vue使用v-if v-show页面闪烁,div闪现的解决方法
    • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
    • vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
    • 关于vuejs中v-if和v-show的区别及v-show不起作用问题
    • vue学习笔记之v-if和v-show的区别
    • 深入理解vue.js中的v-if和v-show
    • Vue.js使用v-show和v-if的注意事项
    • vue中的v-if和v-show的区别详解

    广而告之:
    热门推荐:
    正则 js分转元带千分符号详解

    可以通过缩放来进行分到元的转换,同时使用正则对处理后的数字进行千分位格式化 方法1:(不丢失精度) function Fen2Yuan( num ) { if ( typeof num !== "number" || isNaN( num ) ) return null; return ( num / 100 ).toFixed( 2 ); } 方法2: var num = 370···

    asp.net 定时间点执行任务的简易解决办法

    比如每天凌晨七点的时候email发送一次报表。 这里首先想到的就是利用 Global.asax 文件来实现, 以下Global文件的内容。 复制代码 代码如下: <%@ Application Language="C#" %> <%@ Import Namespace="System.Threading" %> <script runat="server"> ···

    解决js函数闭包内存泄露问题的办法

    本文通过举例,由浅入深的讲解了解决js函数闭包内存泄露问题的办法,分享给大家供大家参考,具体内容如下 原始代码: function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outer = this; return func···

    javascript 中的 delete及delete运算符

    那么,为什么我们能删除一个对象的属性: var x = { a: 1 }; delete x.a; // true x.a; // undefined 但却不能删除一个变量: var x = 1; delete x; // false; x; // 1 也不能删除一个函数: function x() {}; delete x; // false; typeof x; // "function" 注意:delete 只···

    微软ajax库的使用方法(ajax.ajaxMethod)

    用ajax.ajaxMethod需要做四件事 1:webCofig中 <httpHandlers>加上 <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>接点 2:在CS程序中加上 复制代码 代码如下:protected void Page_Load(object sender, EventArgs e) &···

    asp.net coolite 删除时弹出确定按钮

    界面上如下: <ext:Button ID="btnDel" runat="server" Icon="Delete" Text="删除" > <Listeners ><Click Handler="CompanyUser.DoConfirm()"/></Listeners> </ext:Button> 还需要注意要加句这样的代码 <ext:ScriptManager ID="ScriptMa···

    快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题,并提供了两种解决方案。 一、blur和click事件简述 blur事件:当元素失去焦点时触发blur事件;其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以。 click事件:当点击元素时触···

    php实现每日签到功能

    每日签到的功能,供大家参考,具体内容如下 首次签到获得1个积分,第二次签到获得2个积分,第三次签到获得3个积分,以此类推但是签到必须每天连续积分才可以递增,如果有中断再次签到时获得积分仍然从1开始递增; user: id,username,count,point,sign_time sign.html <!DOCT···

    MySQL外键使用及说明详解

    一、外键约束 MySQL通过外键约束来保证表与表之间的数据的完整性和准确性。 外键的使用条件:     1.两个表必须是InnoDB表,MyISAM表暂时不支持外键(据说以后的版本有可能支持,但至少目前不支持);     2.外键列必须建立了索引,MySQL 4.1.2以后的版本在建立外键时···

    vue组件间通信子与父详解(二)

    接着vue组件父与子通信详解继续学习。 二、组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输。 ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{   recvMsg:function(msg){   //参数msg就是子组件通过事件出来的数据   } } ②···