其实这两个都是属于根据条件判断元素是否可见,但是还有有区别的哦!

v-show:就是无论什么时候它其实都一直存在页面上也就是会渲染在DOM上,只是你写了条件让它可见或不可见而已,因为它本质是把它的css属性display设置成了none而已

例如:我曾经在项目开发中一个页面引入三个组件,每个组件数据访问用了三个接口,然后组件是否显示我用了v-show,导致项目运行时我没有在页面显示的组件中的接口也运行啦,就是这个因为虽然我不显示组件,但是它也在DOM上的。

一下是官网中对两者的解释,希望对你有用

v-if vs v-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

有关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. 外部应用复制 表格 到word中 设置表格自适应

    word 批量设置表格宽度自适应 描述 : 我们经常从 外部 如 excel,html 等其他文件 中复制的表格到word 文档 经常会出现在 word 中显示不全的问题 主要是源格式的表格 宽度比 ...

  2. Hadoop基础(二):从Hadoop框架讨论大数据生态

    1 Hadoop是什么 2 Hadoop三大发行版本 Hadoop三大发行版本:Apache.Cloudera.Hortonworks. Apache版本最原始(最基础)的版本,对于入门学习最好. C ...

  3. web 部署专题(零):web相关概念以及原理

    1.什么是 nginx Nginx 是高性能的 HTTP 和反向代理的服务器,处理高并发能力是十分强大的,能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数. 2.正向代理 (1)需 ...

  4. 数据可视化之powerBI技巧(二十三)Power BI可视化技巧,使用DAX自定义时间轴

    ​按照自然日历来展现疫情数据时,是这样的效果, 由于各个国家的疫情爆发时间不一致,按自然日期坐标轴很难比较各个国家的蔓延速度. 如果各个国家都从蔓延日开始统计,展示之后每日的确诊人数,就是同样的时间轴 ...

  5. python之爬虫(十) Selenium库的使用

    一.什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium Remote Control)和测试的并行 ...

  6. conda install 失败 http404

    最近conda install keras出现各种问题,显示配置问你,配置了清华中科大的源,都不行 估计原因是:配置各种源太多,最后全部删除只留一个清华源,成功 暴力方法直接删除C:\Users\Ad ...

  7. AcWing 717. 简单斐波那契

    AcWing 717. 简单斐波那契 原题链接 以下数列0 1 1 2 3 5 8 13 21 -被称为斐波纳契数列. 这个数列从第3项开始,每一项都等于前两项之和. 输入一个整数N,请你输出这个序列 ...

  8. 手把手整合SSM框架

    前言 如果看过前几篇文章,对 Spring 和 MyBatis 有了一定了解,一定想上手试试.这篇文章从 0 到 1,手把手整合 SSM (Spring.Spring MVC.MyBatis). 本篇 ...

  9. 1.对Java平台的理解。“Java是解释执行”对吗

    Java本身是一种面向对象的语言,最显著的特性有两个方面,一是所谓的“书写一次,到处运行”,能够非常容易地获得跨平台能力: 另外就是垃圾收集(GC),Java通过垃圾收集器(Garbage Colle ...

  10. 阿里云内部超全K8s实战手册!超全127页可下载

    一直关注云计算领域的人,必定知道Docker和Kubernetes的崛起.如今,世界范围内的公有云巨头(谷歌.亚马逊.微软.华为云.阿里云等等)都在其传统的公共云服务之上提供托管的Kubernetes ...