相同点:都是动态显示DOM元素。

不同点:1、v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

    2、v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;

    3、v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;  

    4、v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
 
    5、v-if适合运营条件不大可能改变;v-show适合频繁切换。
 
PS:在实际开发过程中,我们更多的是用到v-if;但是同样特殊场合会用到v-show。

vue中的 v-if VS v-show的更多相关文章

  1. vue的使用与安装 npm -v报错

    1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...

  2. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

  3. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  4. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  5. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  6. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  7. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue中$watch源码阅读笔记

    项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...

  9. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 024——VUE中filter的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. linux下脚本监控网络流量

    linux下脚本监控网络流量 学习了:https://blog.csdn.net/chenghuikai/article/details/48437479 学习了:http://www.jb51.ne ...

  2. 杂谈之WEB前端project师身价

    了解javascript语言规范么?+1000 知道各浏览器的css差异么?+1000 javascript差异呢?+1000 知道html各标签的含义并不是常好地运用么?+1000 知道怎样跨浏览器 ...

  3. awk中的NR FNR

    shell编程中,awk简直就是一把利器,你能够把它看成shell的一部分,也能够看成一种单独的语言,功能十分强大.今天先来说一说NR与FNR 先准备两个文件: 1.txt,内容为: user pas ...

  4. linux查看命令总结

    通过命令+文件名查看内容.如下命令可以查看.1, cat :由第一行开始显示文件内容:2,tac:从最后一行开始显示,可以看出tac与cat字母顺序相反:3,nl:显示的时候输出行号:4,more:一 ...

  5. ollydbg快速定位方便调试

    在ollydbg调试的时候,会看到大量的汇编代码(远多于源代码),代码中有大量的函数嵌套调用,调试起来周期很长,难度比较大. 所以我们希望能快速定位到代码,以下是快速定位的四种方法: 1.Goto命令 ...

  6. 使用squid快速搭建代理

      shadowsocks停止维护,如何使用squid快速搭建代理 =======本项目主要介绍如何利用国外VPS搭建多协议代理服务.GFW 封锁了 HTTP/Socks5 代理,HTTP 代理是关键 ...

  7. Android创建和使用数据库

    一.关系型数据库SQLIte         每一个应用程序都要使用数据.Android应用程序也不例外,Android使用开源的.与操作系统无关的SQL数据库-SQLite. SQLite第一个Al ...

  8. Django-form组件补充

    首先来看一个用户登录的实例 from django.forms import Form from django.forms import fields from django.forms import ...

  9. angular input file 上传文件

    <body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)&qu ...

  10. HDU 5296 Annoying problem LCA+树状数组

    题解链接 Annoying problem Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/O ...