相同点:都是动态显示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. 使用glReadPixels 读取颜色缓存,深度缓存和模板缓存数据

    glReadPixels (GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *p ...

  2. maven编译maven-surefire-plugin插件报错

    1.编译错误信息: [INFO] ------------------------------------------------------------------------ [ERROR] Fa ...

  3. VC++的窗口句柄和窗口ID

    原文地址:VC++的窗口句柄和窗口ID作者:放放 句柄是窗口资源的标识,它标识资源在系统中所占用的内存块,应用程序通过窗口句柄对窗口进行操作.除了窗口句柄之外,任何一种资源都有它自己的句柄,比如光标句 ...

  4. ActiveX控件打包成Cab置于网页中自动下载安装

    [背景] http://www.360doc.com/content/13/1120/20/10159093_330853247.shtml 做过ActiveX控件的朋友都知道,要想把自己做的Acti ...

  5. Unix系统介绍

    一.基础知识 操作系统 用户与计算机硬件之间的界面,是控制.管理计算机内各种硬件与软件资源.它是一个多用户.多任务.分时的操作系统. 对于分时系统:假如a进程需要16个时间片,现在根据优先级只分配了1 ...

  6. LINUXFOUNDATION EVENTS

    http://events.linuxfoundation.org/ #lflks This invitation-only event focuses on development and inno ...

  7. start-dfs.sh 和 start-all.sh的区别

    start-dfs.sh 只启动namenode 和datanode, start-all.sh还包括yarn的resourcemanager 和nodemanager 之前就所以因为只启动了star ...

  8. ubuntu 14.04 LTS 安装webbentch压力測试工具

    近期在做 压力測试工具,除了apache的ab測试工具外,发现webbentch工具也不错,这里简介下这两个工具. 一.webbentch安装: wget http://blog.s135.com/s ...

  9. JavaScript2种构造函数创建对象的模式以及继承的实现

    第一种模式: function Person(){ } Person.prototype.say=function(){ alert('hello'); } var person=new Person ...

  10. SSH实现在WIN7系统下访问虚拟机中的Linux系统

    使用的是centos6.4进行练习的,安装的是vmware8虚拟机.以下是总结的一些步骤: 一.确保vmware使用NAT的连接方式,如做地址.端口映射 首先查看vmware的中网络连接的一些方式:E ...