相同点:都是动态显示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. C#网络编程系列文章(一)之Socket实现异步TCPserver

    原创性声明 本文作者:小竹zz 本文地址http://blog.csdn.net/zhujunxxxxx/article/details/44258719 转载请注明出处 文章系列文件夹 C#网络编程 ...

  2. 如何下载合适自己系统环境的Xdebug

      访问https://xdebug.org     在浏览器输入http://localhost/?phpinfo=1 (前提已经安装了wamp环境) Ctrl+a 全选 ,复制 粘贴到刚才的网站的 ...

  3. 更改 vux Tabbar TabbarItem标题下方的文字激活时的颜色

    步骤一: 打开文件build/webpack.base.conf.js, 找到modeule.exports = vuxLoader, 修改如下(并保存) module.exports = vuxLo ...

  4. [Python-tools]defaultdict的使用场景

    Python标准库中collections对集合类型的数据结构进行了非常多拓展操作.这些操作在我们使用集合的时候会带来非常多的便利.多看看非常有优点. defaultdict是当中一个方法,就是给字典 ...

  5. 获取Android屏幕尺寸、控件尺寸、状态栏/通知栏高度、导航栏高度

    1.获取Android屏幕尺寸 我们能够通过getSize()方法获得屏幕的尺寸 Display display = getWindowManager().getDefaultDisplay(); P ...

  6. H5 手机横竖屏判读

    $.fn.screenCheck = function() { var pDiv = $('<div></div>'); pDiv.addClass("screenC ...

  7. caffe学习--cifar10学习-ubuntu16.04-gtx650tiboost--1g--02

    caffe学习--cifar10学习-ubuntu16.04-gtx650tiboost--1g--02 训练网络: caffe train -solver examples/cifar10/cifa ...

  8. ActiveMQ 消息持久化到Mysql数据库

    [root@txylucky local]# tar -zxvf apache-activemq-5.15.8-bin.tar.gz[root@txylucky local]# mv apache-a ...

  9. oracle sql 当初始化数据时避免重复主键

    一:当有主键序列自动增长时候(序列为:seq_cct_id) insert into cs_cost_type (CCT_ID, CCT_NAME, CCT_RATE, CCT_RATE_TYPE, ...

  10. JavaSE 文件递归之删除&amp;获取文件夹文件夹中全部的以.jpg的文件的绝对路径

    1.递归删除文件 假设一个文件夹以下还有子文件夹,进行删除的话会 报错,这个时候要使用递归的方式来删除这个文件文件夹中的全部文件以及文件夹 package cn.itcast.digui; impor ...