简述vue中v-if和v-show的区别

时间:2021-07-26 13:15:17

vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的

v-if

  v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中不存在这个dom元素,以此达到隐藏的效果;

    所以v-if在每次切换的时候都会重新创建或者销毁元素,有较高的切换性能消耗;

  而且v-if是惰性的,如果在初始渲染时条件为假,那就什么也不做,直到条件第一次变为真时,需要渲染时才会开始渲染条件块

  

v-show

  v-show则是无论你的初始条件是什么,元素都会被渲染,就是dom元素始终是存在的,v-show只是通过控制css中的display属性来控制他的显示或隐藏;

  它拥有比较高的初始渲染消耗;

使用场景

  如果元素需要进行比较频繁的切换的话,推荐使用v-show,

  如果很少用到切换,或者元素可能永远都不会显示出来的话,就使用v-if

注意:如果已经在css中明确写出display : none 的话,在v-if中就算设置v-if为true也是不能让元素显示的,因为他没办法覆盖或者修改掉css里面的

    display : none属性,他只是会修改element style为display:""或者display:none

简述vue中v-if和v-show的区别的更多相关文章

  1. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  2. 简述Vue中使用Vuex

    1.为什么要用vuex 在vue组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...

  3. 简述Vue中的过滤器

    1.过滤器的基本概念 概念:本质上是函数: 作用:用户输入数据后,它能够进行处理,并返回一个数据结果:(无return语句不会报错,但是这种过滤器没有丝毫意义) 格式:管道符(  |  )进行连接,而 ...

  4. 简述Vue中的计算属性

    1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...

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

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

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

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

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

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

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

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

  9. VUE中,&commat;click后边&lpar; &rpar; 有无括号的区别

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

随机推荐

  1. 支持ASP&period;NET MVC

    ASP.NET MVC能很方便在后台返回JSON数据,所以与MiniUI进行数据交互非常简单. 1)后台处理: 在MVC控制器中,可以通过方法参数接收数据,也可以通过Request接收更复杂的数据对象 ...

  2. Linux学习路线

    为什么要学习Linux? 为什么学Linux,每个人都有自己的理由: Linux是免费的不用花一分钱,能够节约大笔的成本: Linux是开源的,你可以根据自已的需要修改源代码: Linux是开放的,有 ...

  3. 如何在Linux上安装Storm

    Storm是开源的分布式实时计算系统,能够让数据流处理变得简单.可靠,也因此在大数据领域有广泛的实际 应用.下面介绍一下如何在Linux系统上安装Storm.根据Storm官网介绍,安装Storm软件 ...

  4. 从ASP&period;NET传递参数给水晶报表

    原文 http://www.cnblogs.com/insus/p/3281114.html 上次Insus.NET有简单写了一篇文章<Visual Studio 2012使用水晶报表Cryst ...

  5. hadoop深入研究&colon;&lpar;五&rpar;——Archives

    转载请注明来源地址:http://blog.csdn.net/lastsweetop/article/details/9123155 简介 我们在hadoop深入研究:(一)——hdfs介绍里已讲过, ...

  6. 《JavaScript高级程序设计》读书笔记 ---Array 类型

    除了Object 之外,Array 类型恐怕是ECMAScript 中最常用的类型了.而且,ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别.虽然ECMAScript 数组与其他语 ...

  7. WAMPServer配置修改及问题汇总

    备忘录 软件版本wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b -------------------------------------- ...

  8. Linux查看实时网卡流量的几种方式

    Linux查看实时网卡流量的几种方式 来源  https://www.jianshu.com/p/b9e942f3682c 在工作中,我们经常需要查看服务器的实时网卡流量.通常,我们会通过这几种方式查 ...

  9. html 的实践

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. C&num;自定义Button按钮控件

    C#自定义Button按钮控件 在实际项目开发中经常可以遇到.net自带控件并不一定可以满足需要,因此需要自定义开发一些新的控件,自定义控件的办法也有多种,可以自己绘制线条颜色图形等进行重绘,也可以采 ...