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

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

原文地址:https://www.cnblogs.com/ymbcc/p/11722815.html

时间: 2024-10-02 02:51:28

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

Vue中Computed和Watch的用法及区别

一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <p id="app"> {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} </p> 运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. 因此可改写为: <body> <div id="app"

Vue 中的 v - if 和 v - show + v-for

v-if   v-show v-if是动态的向DOM树内添加或者删除DOM元素: v-if和v-show 都可以控制显示隐藏 v-if 它是没有加载DOM结构 可以叫做惰性加载 <div id="app"><h1 v-if='true'>{{msg1}}</h1> <span>显示</span> <br><h1 v-if='false'>{{msg2}}</h1> <span>不

关于v$datafile和v$tempfile中的file#

v$datafile视图中存储的是有关数据文件的信息,v$tempfile视图中存储的是有关临时文件的信息.在两个视图中都有file#字段,先来看一下官方文档的定义: V$DATAFILE This view contains datafile information from the control file. See Also: "V$DATAFILE_HEADER", which displays information from datafile headers Column

Oracle 中的一些重要V$ 动态性能视图,系统视图和表

v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter where name like '%name'  ----> show parameter name(sqlplus中执行) v$process 运行的进程的信息,如PID,SPID,以及进程的名字,如SMON,PMON在UNIX的进程名称,在windows中会看到类似ORACLE.EXE (PM

微小V营销手机中的标杆|微小V智能营销功能突破200项

微小V营销手机中的标杆|微小V智能营销功能突破200项 营销手机中的标杆!微小v智能营销手机,功能多达200项以上,还在不断的持续更新中!它是一款非常强大的微小v营销手机,也是一款现代营销市场中不可缺少营销工具,微小v营销手机.微小V智能营销手机中的标杆是属于悠铠网络科技有限公司,总部座落于上海,分部深圳,注册资金6000万元,公司拥有拥有全国最顶尖的微营销软件技术开发团队,目前营产品为微小V智能营销手机,客户和代理遍布全国各地,同时也可为企业和品牌方提供营销手机定制化服务,长期合作的品牌方多达

vue中的vue-cli

在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 这个命令行,安装,安装之后检查cnpm的版本 cnpm -v 之后创建项目文件进入项目文件中,在comd中下载vue-cli cnpm install vue-cli -g --s

vue中$watch源码阅读笔记

项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单的$watch: 1 const v = new Vue({ 2 data:{ 3 a: 1, 4 b: { 5 c: 3 6 } 7 } 8 }) 9 // 实例方法$watch,监听属性"a" 10 v.$watch("a",()=>console.log(&

vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -s 引入的方式有两种: 1.main.js中全局引入 import echarts from 'echarts' Vu

vue 中 直接操作 cookie 及 如何使用工具 js-cookie

vue 中直接操作 cookie 以下3种操作方式 set: function (name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); }, get: function (name) {