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

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. 【TokyoWesterns CTF】shrine

    信息: 题目来源:TokyoWesterns CTF 标签:flask.SSTI 解题过程 构建题目环境后,访问主页可以获得程序源码: import flask import os app = fla ...

  2. shell专题(二):Shell解析器

    (1)Linux提供的Shell解析器有: [atguigu@hadoop101 ~]$ cat /etc/shells /bin/sh /bin/bash /sbin/nologin /bin/da ...

  3. python 并发专题(四):yield以及 yield from

    一.yield python中yield的用法很像return,都是提供一个返回值,但是yield和return的最大区别在于,return一旦返回,则代码段执行结束,但是yield在返回值以后,会交 ...

  4. bzoj3211花神游历各国&&bzoj3038上帝造题的七分钟2*

    bzoj3211花神游历各国 题意: n个数的序列,m个操作,操作两种:区间开根(向下取整)和区间求和.n≤100000,m≤200000,序列中的数非负且≤109. 题解: 一个≤109的数开6次根 ...

  5. JVM系列6-GC算法

    一.如何判定垃圾? 1.1.Reference Count引用计数法:引用计数count=0的对象 1.2.Root Seaching根可达法:从root开始不可达的对象 常见的可做GC roots的 ...

  6. 010.Nginx正反代理

    一 Nginx代理 1.1 Nginx代理概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器.同时也是一个IMAP.POP3.SMTP代理服务器.nginx可以作为一个HTT ...

  7. layui :iframe 与 layer 的位置问题

    最近有个项目是用 Layui 搭的,但是在layer的使用上遇到了问题. 简单的说,在父页面声明layer,在子页面中的子页面用window.parent调用那个父页面的layer. 讲道理应该是和i ...

  8. p44_IP数据包格式

    一.IP数据报格式 二.IP分片 数据链路层每帧可封装数据有上限,IP数据超过的要分片. 标识:同一数据报的分片使用同一标识 标志: 片偏移(13bit):用于还原数据报顺序,指出某片在原分组1中的相 ...

  9. web自动化 -- 浏览器窗口切换

    切换浏览器窗口 示例: from time import sleep from selenium import webdriver from selenium.webdriver.support.wa ...

  10. CSRF与XSS攻击的原理与防范

    CSRF 1.概念与原理 CSRF,跨站请求伪造,攻击方伪装用户身份发送请求从而窃取信息或者破坏系统.例如: 用户访问A网站登陆并生成了cookie,再访问B网站,如果A网站存在CSRF漏洞,此时B网 ...