相同点或者说功能,都可以动态操作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适合频繁切换。

vue 中v-if 与v-show 的区别的更多相关文章

  1. Vue中v-show和v-if的使用以及区别

    个人博客 地址:http://www.wenhaofan.com/article/20190321143330 v-if 1.v-if 根据条件渲染,它会确保在切换过程中条件块内的组件销毁和重建    ...

  2. Vue中hash模式和history模式的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...

  3. vue中computed、metfods、watch的区别

    一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...

  4. vue中的router和route有什么区别?

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  5. VUE中,@click后边( ) 有无括号的区别

    在使用的时候,两种方式结果效果差不多是一样. @click="Login()" @click="Login"而唯一的区别就是,有括号的可以在括号里写传递的参数. ...

  6. vue中一些常见的面试题

    前言 一位正在学习前端的菜鸟,虽菜,但还未放弃. 内容 1,说一下vue中的指令 答: ①,v-html:主要用来渲染html节点,其作用与原生的innerHtml基本一致 ②,v-text:主要用来 ...

  7. Oracle 中的一些重要V$ 动态性能视图,系统视图和表

    v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...

  8. 如何对多个文件进行MODELSIM仿真? (由于是一个很大的项目,不可能把所有MODULE都放在一个文件里。 如何在ModelSim中对多个.V文件进行仿真?)

    可以将所有要编译的所有文件的名字做一个list.新建一个文本文档,重命名为vflist vflist内容例子如下(src为文件夹):src/base_addr_chk.vsrc/config_mux. ...

  9. 【转】 Oracle 中的一些重要V$ 动态性能视图,系统视图和表

    v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...

  10. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

随机推荐

  1. 从Class源码看反射

    日常敲码中,如果想要在程序运行阶段访问某个类的所有信息,并支持修改类的状态或者行为的话,肯定会用到反射,而反射靠的就是Class类.Java的动态代理也用到了这个东西,所以了解其基本操作在苦逼的CRU ...

  2. linux学习(一)认识阿里云

    一.简介 阿里云,全球领先的云计算服务平台,阿里巴巴集团旗下公司.致力于打造公共.开放的云计算服务平台.提供云服务器ECS.关系型数据库服务RDS.开放存储服务OSS.内容分发网络CDN.对象存储OS ...

  3. Mac 系统下如何显示和隐藏文件

    苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令.显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 第一种方式: 显示Mac隐藏文件 ...

  4. burp suite之spider(爬虫)

    spider (蜘蛛,这里的意思指爬行) 像蜘蛛一样在网站上爬行出网站的个个目录信息,并发送至Target. 1.Control(控制) Spider is paused :停止蜘蛛爬行 Clear ...

  5. VueX中state变化捕捉不到_getters监测不到state的变化

    原因 可能有多种原因, 现在我说一下我碰到的一种情况: state种有一个变量叫state,它是一个json对象, 可把我害惨了.因为他这个json长这个样: messageBox:{ friendI ...

  6. Spring学习(八)--Spring的AOP

    自工作以后身不由己,加班无数,996.995不可控制,高高立起的flag无法完成,无奈,随波逐流,尽力而已! 1.advice通知 advice主要描述Spring AOP 围绕奥方法调用而注入的切面 ...

  7. 中秋国庆8天挑战赛 之 挑战8天掌握微信小程序

    中秋国庆8天挑战赛 挑战8天掌握微信小程序 当前学习进度: // 10.1​// 学习内容:​// 10.2​// 学习内容:​// 10.3​// 学习内容:​// 10.4​// 学习内容:​// ...

  8. Cadence OrCAD如何查看整页原理图中的元件的属性

    转载: 1.选中DSN文件右键"Edit Object Properties ".在这里插入图片描述2.单击选择"Pivot"按钮. 3.找到Part refe ...

  9. SQL数据库删除和还原的时候提示 被占用 记录一下

    设置离线 1)ALTER DATABASE [datebase] SET OFFLINE WITH ROLLBACK IMMEDIATE设置在线 2)ALTER DATABASE [datebase] ...

  10. Pycharm开发环境配置与调试

    在Windows宿主机上搭建Ubuntu虚拟机的Pycharm开发环境,Ubuntu开启Samba服务,使用网络映射将Ununtu下Python项目工程路径映射到Windows下 创建Pycharm工 ...