简述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
简述vue中v-if和v-show的区别的更多相关文章
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- 简述Vue中使用Vuex
1.为什么要用vuex 在vue组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...
- 简述Vue中的过滤器
1.过滤器的基本概念 概念:本质上是函数: 作用:用户输入数据后,它能够进行处理,并返回一个数据结果:(无return语句不会报错,但是这种过滤器没有丝毫意义) 格式:管道符( | )进行连接,而 ...
- 简述Vue中的计算属性
1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...
- Vue中v-show和v-if的使用以及区别
个人博客 地址:http://www.wenhaofan.com/article/20190321143330 v-if 1.v-if 根据条件渲染,它会确保在切换过程中条件块内的组件销毁和重建 ...
- Vue中hash模式和history模式的区别
vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...
- vue中computed、metfods、watch的区别
一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...
- vue中的router和route有什么区别?
我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...
- VUE中,@click后边( ) 有无括号的区别
在使用的时候,两种方式结果效果差不多是一样. @click="Login()" @click="Login"而唯一的区别就是,有括号的可以在括号里写传递的参数. ...
随机推荐
- FileUtils (从磁盘下载,从网络下载)
public class FileUtils { /** * realPath 磁盘路径 D://project/download/ * urlPath 后半部分路径 具体根据业务需求,例如:WEB- ...
- NPM错误
有时突然报下面错误: 本人经验是IP变了...
- android 开发,视频群聊引发短信异常
说到 NDK 开发,其实是为了有些时候为了项目需求需要调用底层的一些 C/C++ 的一些东西:另外就是为了效率更加高些. 但是很多时候能不用就不用:这个是啥原因?个人感觉有些时候是觉得麻烦,首先要配置 ...
- RedHat下使用gcc编译HelloWorld.cpp
gcc ./HelloWorld.cpp 错误: /tmp/ccZuz3Ca.o:(.eh_frame+0x12): undefined reference to `__gxx_personality ...
- 多项式总结(unfinished)
试试以二级标题为主的格式. 多项式相关 注:本篇博客不包含\(FFT\)基础姿势.如果您想要阅读本篇博客,请确保自己对\(FFT,NTT\)有基本的认识并且能够独立写出代码. 多项式是什么? 左转数学 ...
- 前端String类型转JSON类型
在js中通过ajax获取数据后,赋值给前端树形插件zTree中的zNodes,但一直失败如图: 浏览器端报错: 于是我将zNodes变量的值直接写死,并打印这两个的值,如图 再次运行成功.浏览器控制台 ...
- es之java分页操作
按照一般的查询流程来说,如果我想查询前10条数据: · 1 客户端请求发给某个节点 · 2 节点转发给个个分片,查询每个分片上的前10条 · 3 结果返回给节点,整合数据,提取前10条 · 4 返回给 ...
- 解决ios和Android的差异
第一个:input,button input标签在 android系统不带圆角,在ios系统上带圆角 解决办法: input,button{ -webkit-appearance:none; } 第二 ...
- linux添加新硬盘不需要重启识盘,及查看uuid
添加新物理硬盘 用ssh工具连接到服务器,执行:fdisk -l 查看磁盘,并没有新加的硬盘 fdisk -l查看硬盘及分区状态 查看主机总线号,命令:ls /sys/class/scsi_ ...
- AtomicStampedReference 源码分析
AtomicStampedReference AtomicStampedReference 能解决什么问题?什么时候使用 AtomicStampedReference? 1)AtomicStamped ...