v-if 和v-show 的区别
发布日期:2022-03-15 19:30:47
浏览次数:5
分类:技术文章
本文共 726 字,大约阅读时间需要 2 分钟。
一、相同点
都可以动态控制着dom元素的显示隐藏
二、区别
v-if
: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除
;v-show
: 控制DOM 的显示隐藏是为DOM元素添加css的样式display
,设置none
或者是block
,DOM元素是还存在的
三、性能对比
v-if
有更高的切换消耗;v-show
有更高的初始渲染消耗
例如:
v-if:
在请求后台接口,用接口返回数据渲染生成多个元素的时候,由于网速太慢,导致数据刚开始没有值,此时我们页面也会进行渲染空数据就会报错。 我们可以把一个元素作为包装元素,并使用v-if 进行条件判断,如果有值,才会显示内部元素。最终的渲染不会包含这个元素,v-show是不支持这么做的。 { {seller.supports.length}}个
export default { data() { return { seller:null}},//生命周期 - 创建完成(访问当前this实例)created() { this.$axios.get('http://www.test.com').then(res=>{ this.seller=res.data })},}组件刚创建,渲染完成后,请求未必能完成。所以一开始的seller.supports只是一个空值,必须在之前加上v-if,确保有值以后再开始计算length
{ {seller.supports.length}}个
v-show:
商品分类选项卡,频繁切换转载地址:https://blog.csdn.net/weixin_58102387/article/details/122813801 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年03月16日 03时21分57秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
java lua热更新_lua热更新学习
2019-04-21
php apc.dll下载,PHP之APC缓存详细介绍 apc模块安装
2019-04-21
html贝塞尔曲线在线,贝塞尔曲线的一些事情_html/css_WEB-ITnose
2019-04-21
Java前台显示近20天的东西_第十次课:前台首页设计及显示商品信息
2019-04-21
java开发web网站的路由设计_理解Web路由(浅谈前后端路由与前后端渲染)
2019-04-21
excel如何把顺序倒过来_在excel中怎么使文字颠倒顺序反过来显示呢?
2019-04-21
java 62进制 转换_序列号生成的另一种玩法--62进制如何玩?
2019-04-21
脚本语言php是什么意思,PHP脚本语言
2019-04-21
matlab数学规划模型,数学规划模型
2019-04-21
视频提取音频php,如何提取视频中的音频,从视频文件中提取出音频输出成MP3格式...
2019-04-21
diy.php添加验证码,织梦dedecms自定义表单中加入验证码
2019-04-21
c语言 无错 但只运行一半,求哈夫曼编码时程序运行到一半就终止了,编译无错...
2019-04-21