相同点:都是动态显示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常用SQL整理

    MySQL常用SQL整理 一.DDL #创建数据库 CREATE DATABASE IF NOT EXISTS product DEFAULT CHARSET utf8 COLLATE utf8_ge ...

  2. word中更改图片和标题之间的垂直距离

    word中插入图片后.往往须要给图片加上标题. 你插入图片和给图片插入标题时,word用的是默认的格式给你插入的图片和标题. 假如原来的paragraph是2倍行距.你的图片和标题之间的距离也是2倍行 ...

  3. Android——通过Intent传递一些二进制数据的方法有哪些

    1.方法 (1)使用Serializable接口实现序列化.利用Bundle.putSerializable(Key, Object);这里objec对象需要实现serializable接口. (2) ...

  4. HRBUST2030(dfs)

    成语接龙 Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %lld , %llu Java class nam ...

  5. jsp表达式

    能够在"<%="和"%>"之间插入一个表达式(注意:不可插入语句. "<%="是一个完整的符号,"<%&q ...

  6. C/C++,java开源数学计算库

    有限元分析.数值计算.三维建模.信号处理.性能分析.仿真分析...这些或多或少与我们常用的软件息息相关,假如有一天你只需要这些大型软件系统的某一个很有限的功能,你是不是也要因此再用一用那动辄几个g的软 ...

  7. ubuntu 安装后的配置

    osx 下用 vmware 安装了一个 ubuntu 虚拟机,版本是 14.04 server.安装完之后要做一系列配置,记录如下. 配置 Android 编译环境 sudo apt-get inst ...

  8. iOS8中提示框的使用UIAlertController(UIAlertView和UIActionSheet二合一)

     本文转载至 http://blog.csdn.net/liuwuguigui/article/details/39494597       IOS8UIAlertViewUIActionSheet ...

  9. EasyDarwin开源手机直播方案:EasyPusher手机直播推送,EasyDarwin流媒体服务器,EasyPlayer手机播放器

    在不断进行EasyDarwin开源流媒体服务器的功能和性能完善的同时,我们也配套实现了目前在安防和移动互联网行业比较火热的移动端手机直播方案,主要就是我们的 EasyPusher直播推送项目 和 Ea ...

  10. mysql学习之基础知识

    一.什么是数据库 一般而言,数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.我们也可以将数据存储在文件中,但是在文件中读写数据速度相对较慢.所以,使用关系型数据库管理系统(RDB ...