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

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. python 装饰器(七):装饰器实例(四)类装饰器装饰类以及类方法

    类装饰器装饰类方法 不带参数 from functools import wraps import types class CatchException: def __init__(self,orig ...

  2. ffplay源码编译

    ffplay是ffmpeg源码中一个自带的开源播放器组件,支持本地视频文件的播放以及在线流媒体播放,很多商业播放器都是基于ffplay定制而来的.ffplay中的代码充分利用了ffmpeg中的函数库, ...

  3. There are unfinished transactions remaining. Please run yum-complete-transaction as root.

    问题:CentOS  运行软件更新时,提示如下错误. 解决办法: 在终端界面,运行   sudo yum-complete-transaction.

  4. 设计模式:fly weight模式

    目的:通过共享实例的方式来避免重复的对象被new出来,节约系统资源 别名:享元模式 例子: class Char //共享的类,轻量级 { char c; public: Char(char c) { ...

  5. 怎么理解Python迭代器与生成器?

    怎么理解Python迭代器与生成器?在Python中,使用for ... in ... 可以对list.tuple.set和dict数据类型进行迭代,可以把所有数据都过滤出来.如下:         ...

  6. java 之死循环

    public class StringTest { public static void main(String[] args) { System.out.println(getStringCount ...

  7. Problem C: 计算机类

    Description 定义一个Computer类,有两个属性: 1. 字符串属性name,用于表示计算机的名字. 2. 静态整型属性cnt,用于记录产生的计算机对象的个数. 至少有如下成员函数: 1 ...

  8. lambda之美

    github源码 大前提:jdk8  允许lambda表达式  最好在maven中加入 <properties> <java.version>1.8</java.vers ...

  9. SSM框架整合的最新打开方式(打造最详细的SSM整合教程)

    SSM整合 文章已托管到GitHub,大家可以去GitHub查看阅读,欢迎老板们前来Star!搜索关注微信公众号 [码出Offer] 领取各种学习资料! SSM 一.创建一个Maven项目 File ...

  10. 想理解JVM看了这篇文章,就知道了!

    前言 ​ 本章节属于Java进阶系列,前面关于设计模式讲解完了,有兴趣的童鞋可以翻看之前的博文,后面会讲解JVM的优化,整个系列会完整的讲解整个java体系与生态相关的中间件知识.本次将对jvm有更深 ...