Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法


Posted in Javascript onOctober 12, 2018

在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下。

1.闪现的原因

这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码。

2.解决的办法

其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出现,那就让元素在JS执行之前都保持不显示就好了。那事情就分为两步:

  • 选择在JS执行前要隐藏的元素
  • 添加display:none样式

如何只定位JS执行前的元素呢?Vue有一个指令 v-cloak ,它的特殊之处在于 保持在元素上直到关联实例结束编译 。就是说这个属性会一直在元素上,直到编译结束。只需要在需要隐藏的元素上增加 v-cloak 指令即可。

Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

接下来在CSS中定义隐藏样式即可:

Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

到这里,这个问题就解决了。Vue是前端技术的一次大的跃进,有坑并不可怕,相信办法总比问题多。

总结

以上所述是小编给大家介绍的Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
javascript相关事件的几个概念
May 21 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
javascript实现tab切换特效
Nov 12 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 #Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 #Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 #Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 #Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 #Javascript
在JS循环中使用async/await的方法
Oct 12 #Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 #Javascript
You might like
Destoon实现多表查询示例
2014/08/21 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
设定php简写功能的方法
2019/11/28 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python机器学习之神经网络实现
2018/10/13 Python
python读取图片任意范围区域
2019/01/23 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Django中template for如何使用方法
2021/01/31 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
保密协议书范本
2014/04/22 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
三好学生事迹材料
2014/12/24 职场文书
中学生学习保证书
2015/02/26 职场文书
环卫个人总结
2015/03/03 职场文书
杨善洲电影观后感
2015/06/04 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL