相同点:都是动态显示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. django 设置局域网内访问项目

    1. 关闭主机电脑上的防火墙(或者不用关闭,加一个端口号就行) 2.在你的settings.py文件中,找到ALLOWED_HOSTS=[ ],在中括号中加入你在局域网中的IP.例:我在局域网中的IP ...

  2. selector在手机上或浏览器显示各种姿势(虚拟下拉菜单)

    测试机型:小米.华为.苹果 测试浏览器:Chrome.Safari.Firefox 最后的结果就是你搞你的,我搞我的! 我认为这样漂亮,你认为那样漂亮(我认为你们都统一!) 因为项目时间紧,所以直接用 ...

  3. ffmpeg 跟我学 视频教程

    最近一段时间找时间录制了一些Ffmpeg视频教程,还有录制完毕,会持续更新,内容会包含Ffmeg保存文件,网络流转发, 编码,解码,播放器制作,以及服务端搭建等等,适合初学者,有需要的朋友的可以关注: ...

  4. ActiveMQ测试工具

    1. 测试工具 目前使用两种测试工具进行压力测试 1. Jmeter 测试单客户端收发多主题,测试高并发,大数据量时的接收效率 2. emqtt_benchmark测试多客户端收发主题,测试高吞吐量下 ...

  5. 照猫画虎学gnuplot之折线图

    本节重点:怎样利用已知数据来画折线图. 首先说明:gunplot文件的后缀名为*.plt.本节讲述怎样利用已知数据来画折线图,顾名思义必定涉及到两个文件:一个是须要的数据文件,即*.dat文件.还有一 ...

  6. Linux高端内存

    Linux高端内存是针对物理内存来说的,虚拟内存没有高端这个概念.Linux系统将虚拟内存分为两个部分,即用户地 址空间和内核地址空间,对于32位系统来说,虚拟地址空间为4GB,其中用户空间范围为0- ...

  7. 关于移动端文字无法垂直居中(或line-height不起作用)的问题的解决方案(网摘)

    最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案: 1.首先在html头部把我们常用的lang="en&qu ...

  8. PythonCookBook笔记——文件与IO

    文件与IO 所有的程序都要处理输入与输出,涉及到文本.二进制文件.文件编码和对文件名.目录的操作. 读写文本数据 需要读写各种不同编码的文本数据,使用rt模式的open()函数. 该读写操作使用系统默 ...

  9. SegmentFault 巨献 1024 程序猿游戏「红岸的呼唤」第二天任务攻略

    眼看实验室就要关门了.走之前写一下解题过程(事实上大家都等着第三题出来吧大概-=). 高速传送门:http://segmentfault.com/game/2 那么接昨天的博客,今天的题目是这种: 完 ...

  10. Android自己定义控件--下拉刷新的实现

    我们在使用ListView的时候.非常多情况下须要用到下拉刷新的功能.为了了解下拉刷新的底层实现原理,我採用自己定义ListView控件的方式来实现效果. 实现的基本原理是:自己定义ListView, ...