v-if和v-show小对比
2024-08-24 19:05:31
相同点
都可以控制元素的显示与不显示。在判断DOM节点是否要显示。
不同点
1.实现方式
v-if是根据后面的数据的真假判断直接从DOM树上删除或重建元素节点。
v-show 只是修改元素的css的样式,即display属性值,元素始终在DOM树上。
2.编译过程
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;
v-show只是简单的基于css切换;
3.编译条件
v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译;
v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素始终被保留;
4.性能损耗
v-if有更高的切换消耗,不适合做频繁的切换;
v-show有更高的初始渲染消耗,适合做频繁的额切换;
5.注意
1.v-if 指令可以应用于template包装元素上,而v-show不支持template
2.将v-show应用在组件上时,因为指令的优先级 v-else 会出现问题,解决办法就是用另一个 v-show 替换 v-else
最新文章
- Linux 内核数据结构:双向链表
- 一次U盘拯救的经历
- 1001Freedownloads – 免费下载海量素材
- HTML+CSS学习笔记 (7) - CSS样式基本知识
- 经典SQL语句大全之数据开发
- 列表框List Box
- html5精品教程
- UGUI射线检测
- 三目运算:and/or 技巧
- linux下ACE的编译与安装
- I/O模型系列之四:两种高性能IO设计模式 Reactor 和 Proactor
- java实现二叉树的建立以及实现二叉查找树的查、插、删、遍历
- 2019-2-14SQLserver中拼音查询数据
- day26 Python 改变对象的字符串显示
- 点击eclipse包报错
- dede频道页实现三级栏目嵌套调用文章
- 【校招面试 之 C/C++】第8题 C++中的静态绑定与动态绑定
- 生成项目目录结构(based on windows system)
- 3235: [Ahoi2013]好方的蛇
- Python3 shelve模块(持久化)
热门文章
- ionic android - Unable to start the daemon process. Could not reserve enough space for 2097152KB object heap
- 20145216史婧瑶《Java程序设计》第三次实验报告
- 20145314郑凯杰《信息安全系统设计基础》第八周复习总结 Part A
- 20145335郝昊 Java学习心得 密码学代码复写
- 广播机制的CS模型实现
- Ubuntu16.04安装搜狗拼音输入法(中文输入法)[转]
- RedHat7.4最小化安装yum源不可用问题解决
- android emulator 安装中文输入法
- 转载- ACM常见的各种说法
- GridView绑定数据源 绑定DataReader /DataSet /DataTable