相同点：都是动态显示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. mysql select last_insert_id()函数返回的值

    mysql)); 创建表j 插入数据 mysql> insert into j(name) values('wanggiqpg'); Query OK, row affected (0.00 s ...

  2. Android加壳native实现

    本例仅在Android2.3模拟器跑通过,假设要适配其它机型.请自行研究,这里不过抛砖引玉. 0x00 在Android中的Apk的加固(加壳)原理解析和实现,一文中脱壳代码都写在了java层非常ea ...

  3. Windows 系统 vs2012 MinGW 编译ffmpeg 静态库

    Windows系统下 vs2012编译ffmpeg 动态库 前面已经有文章讲述,本文将讲述如果编译生成ffmpeg静态库以方便 在vs2012下调用. 准备工作:安装MinGW环境,修改ffmpeg配 ...

  4. 简单的HTML5音乐播放器(带歌词滚动)

      // // 0) { this.lrcArr.push(item); } } frag = document.createDocumentFragment(); for(i = 0,len = t ...

  5. PHP date()获取系统时间不对

    使用date_default_timezone_set(”)方法; <?php error_reporting(0); date_default_timezone_set('PRC'); hea ...

  6. SQL Cursor生命周期

      阅读导航 1 Cursor Step 1.1 Create cursor 1.2 Parse statement 1.3 descript and define 1.4 Bind variable ...

  7. java线程中断[interrupt()函数] (转载)

    一个正常的线程中断: 从运行到真正的结束,应该有三个阶段: 正常运行. 处理结束前的工作,也就是准备结束. 结束退出. Java曾经提供过抢占式限制中断,但问题多多,例如的Thread.stop.另一 ...

  8. js thiskeyword

    相信大家都接触过this了,那么 this究竟是什么意思呢?看其字面意思就是个代词.指代其它的一些东西. 那么我们在程序其中,事实上也是一样.this也是个代词. 比方我们在java其中,this的k ...

  9. 2016/07/07 apmserv5.2.6 Apache启动失败,请检查相关配置。MySQL5.1已启动。

    因为要用PHP做一个程序,在本机上配PHP环境,下了个APMServ5.26,安装很简单,不再多说,装好后,启动,提示错误,具体是:“Apache启动失败,请检查相关配置.√MySQL5.1已启动”, ...

  10. 关于js开发的小问题

    一.开发当中经常会动态拼接html,当然为了简便性好多人直接就是使用内联事件: $('#td1').html( '<a href="#" onclick="app. ...