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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
npm qs模块使用详解
Feb 07 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
javascript中正则表达式语法详解
Aug 07 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
德劲1104的电路分析与改良
2021/03/01 无线电
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
js canvas实现红包照片效果
2018/08/21 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
深入解析Python中的lambda表达式的用法
2015/08/28 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
学校万圣节活动方案
2014/02/13 职场文书
企业精神口号
2014/06/11 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
租房协议书范例
2014/10/14 职场文书
2014年教研室工作总结
2014/12/06 职场文书
谢师宴答谢词
2015/01/05 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python