VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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的区别详解

    广而告之:
    热门推荐:
    PHP单例模式模拟Java Bean实现方法示例

    本文实例讲述了PHP单例模式模拟Java Bean实现方法。分享给大家供大家参考,具体如下: 问题: 根据如下杨辉三角形 实现一个get_value($row,$col)方法: (前一个由于代码是手机编辑的,很乱,重新发下)只是为了实现这个方法,很简单,几行代码就能实现,但如果行和列的值稍微···

    Ubuntu18.04 安装mysql8.0.11的图文教程

    1.下载deb包 2.运行命令 sudo dpkg -i mysql-apt-config_0.8.10-1_all.deb sudo apt update 3.安装mysql8 sudo apt install mysql-server 4.输入root密码 5.密码加密方式选择5.x 6.查看mysql是否安装成功 mysql -u root -p 7.查看mysql字符集,mysql8字符集默认为utf···

    基于JS实现web端录音与播放功能

    纯js实现web端录音功能,功能并不是特别多,逐步增加中,详细地址:github。 getUserMedia在非localhost和127的情况下,需要开启https,由于腾讯云的没备案,demo就不放了,可以自行获取代码并启动测试。 实现方式 实现原理的话,主要是以下三点, 利用webrtc的getUserMedia···

    基于Modernizr 让网站进行优雅降级的分析

      如今一个网页展现的内容是越来越丰富,其中不乏一些HTML5、CSS3的功能特效。那么如果客户端的浏览器支持HTML5。页面访问效果很好没有问题。如果不支持HTML5,还是IE6,7,8等浏览器的时候呢?这个时候往往是作为一个前段人员非常头痛的事情了,兼容。   此时的兼容。···

    CI框架中cookie的操作方法分析

    本文实例讲述了CI框架中cookie的操作方法。分享给大家供大家参考。具体分析如下: 第一种设置cookie的方式:采用php原生态的方法设置的cookie的值 复制代码 代码如下:setcookie("user_id",$user_info['user_id'],86500);  setcookie("username",$user_info['username'],···

    解决jquery有正确返回值但不执行success函数的问题

    从后台返回的结果是这样的:{“readyState”:4,”responseText”:”success”, “status”:200, “statusText”:”OK”} 前端代码 $.ajax({ url:'save', type:'POST', dataType:'json', contentType:'application/json', data:JSON.stringify({ 'loginName':login_name, 'password':···

    MySQL中对于NULL值的理解和使用教程

    NULL值的概念是造成SQL的新手的混淆的普遍原因,他们经常认为NULL是和一个空字符串''的一样的东西。不是这样的!例如,下列语句是完全不同的: mysql> INSERT INTO my_table (phone) VALUES (NULL); mysql> INSERT INTO my_table (phone) VALUES (""); 两个语句把值···

    教你如何用php实现LOL数据远程获取

    过几天网站就要上线了。 最近完成了一个小功能,就是LOL数据获取, 比如:我给你一个号,你把这个号是否打过排位?战斗力是多少?胜率和所在的总场数数据获取过来 数据都在多玩的网站上可查,所以该做的功能就是远程抓取。 功能没啥亮点,就是简单的实现。 反正就是JS不···

    UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE noteexists

    大家先看下数据库权限问题,然后再进行如下操作。 SQL:SELECT value FROM [Table]vars WHERE name='noteexists2′ UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE name='noteexists2′ Error:SELECT command denied to user ‘数据库‘@'IP地址'···

    织梦dedecms系统会员开启邮件验证

    我们在使用织梦会员注册的时候,大家要开启注册会员邮箱验证,下面我们介绍下设置方法,首先您的服务器要支持哦。  第一步,后台设置:  第二步,QQ邮箱里设置: