相同点或者说功能,都可以动态操作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. 1.KafKa-介绍

  2. Linux安装指定版Git以及卸载

     来自于:https://www.cnblogs.com/rstyro/articles/10817855.html 安装Git 在linux中,安装Git 一般一条命令即可,如下: Debian/U ...

  3. CVE-2020-0796(Windows SMBv3) RCE漏洞复现

    CVE-2020-0796 攻击机:win10:192.168.205.1 靶机win10:192.168.205.132 关闭defender防火墙 0x01 影响版本 Windows 10 190 ...

  4. Shell学习(四)Shell运算符

    一.基础运算 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最常用. expr 是一款表达式计算工具,使用它能完成表达式的求值操作. #计算两个数 ...

  5. Oracle学习(八)RECORD(自定义结构)

    一.定义 记录数据类型的一种,将几个相关的.分离的.基本数据类型的变量组成一个类似于整体表结构的对象,即RECORD复合数据类型. 在使用记录数据类型变量时,需要在声明部分先定义记录的组成.记录的变量 ...

  6. Centos-关机重启

    为何要使用命令进行关机重启? linux系统中的各个进程携带着各种数据,强制关机会照成数据混乱而丢失数据,甚至可能损坏硬件,所以我们需要更加安全的关机和重启方式 关机重启相关命令,需要root用户才能 ...

  7. --initialize specified but the data directory has files in it. Aborting

    出错版本: mysql 5.7 why? yum 安装数据库时候,默认数据存放目录为 /var/lib/mysql,然而这个目录下有数据 way? 进入 /var/lb/mysql 目录下清空该目录下 ...

  8. python下正则表达式的随笔记录

    使用了下正则的表达式: 目的:取出字符串中{}中的内容 最后使用的正则表达式为 {(.*?)} 先看   .*?  : 首先  .  是用来匹配字符串,但是只能匹配一次. 所以加上  *  ,可以让 ...

  9. Java知识系统回顾整理01基础04操作符07Scanner

    一.Scanner 需要用到从控制台输入数据时,使用Scanner类. 二.使用Scanner读取整数 注意: 使用Scanner类,需要在最前面加上 import java.util.Scanner ...

  10. c++中CreateEvent函数

    参考:https://blog.csdn.net/u011642774/article/details/52789969 函数原型: HANDLE CreateEvent( LPSECURITY_AT ...