vue中v-if与v-show区别
vue中显隐方法常用两种,v-show和v-if,但这两种是有区别的。
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区别的更多相关文章
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- Vue 中 export及export default的区别
相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...
- vue中的v-if和v-show的区别
v-if和v-show的区别是前端面试中常问的基础知识点,v-if.v-show顾名思义就是用来判断视图层展示效果的.那么具体是怎么展示呢?v-if和v-show的区别又是什么呢? 首先我们可以来看一 ...
- vue中mode hash 和 history的区别
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
- Vue中 onmouseenter,onmouseleave,onmouseover,onmouseout的区别
今天在学Vue视频的时候,提到了这四个触发事件,我就想做下笔记: 1.onmouseenter和onmouseleave是一组:当鼠标进入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发 ...
- vue中的$route和$router的区别
1. $route是一个对象 可以获取当前页面的路由的路径query.params.meta等参数: 2.$router是VueRouter的一个实例对象 在options中可以获取路由的routes ...
随机推荐
- BDD测试和TDD测试
BDD测试和TDD测试 TDD TDD是测试驱动开发(Test-Driven Development)的缩写,是敏捷开发中的一项测试技术,也是一种设计方法论.她的大概思路是:先针对每个功能点抽象出接口 ...
- python日志logging配置
python日志logging配置 为了方便ELK收集日志,将日志打印成json格式 开发过程中,使用json格式不方便排查问题 本文章使用python的logging模块,一步步增加配置,来说明每个 ...
- Mac技术服务, 感谢 点赞打赏
首先,非常感谢大家对我的支持和鼓励. 如果需要单独解决Mac问题,您也可以选择付费服务,感谢大家的理解与支持! * 普通问题/软件安装:10元--100元每个(根据具体问题由您而定): * 普通问 ...
- Java设计模式——装饰器模式(Decorator)
今天上课讲了java设计模式中的装饰器模式--Decorator,由于早上起的很早,肚子也很饿,知识点本身也晦涩难懂,听的云里雾里的,所以在课下对这块的知识做出一些总结. 定义 装饰器模式又名包装(W ...
- 使用Wireshark完成实验3-IP
1.使用Wireshark打开ip-ethereal-trace-1,如图 电脑IP地址为192.168.1.102 2.如图,IP包头中上层协议字段的值为1,代表为ICMP 3.如图,IP头中有20 ...
- 软件工程日报一——Andriod的安装与配置
建民老师给我们布置了一个编写记事本app的任务,因此需要我们下载andriod studio,下面是我的下载过程 在下载andriod studio之前,需要我们配置Java环境 进入控制面板,输入 ...
- Mybatis二级缓存(2)
10.3.一级缓存的原理 10.3.3 一级缓存的测试
- linuxz中压缩解压缩文件
压缩解压缩.tar格式文件: 把文件打包为tar.gz命令: tar -zcvf 文件名.tar.gz 要压缩的文件/文件夹 ...
- shell - scriptreplay timing.log output.session
script -t 2> timing.log -a output.session cmd cmd cmd exit scriptreplay timing.log output.session ...
- 简单理解gqrx是什么
gqrx:Gqrx是一个基于gnuradio和Qt架构,开发的一个开源的SDR接收机的应用.下图是他的一个运行界面: gnu radio GNU Radio是一个自由软件开发工具包,提供实现软件无线电 ...