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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
js控制frameSet示例
Sep 10 Javascript
iframe实用操作锦集
Apr 22 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
微信小程序实现人脸检测功能
May 25 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP字符串的连接的简单实例
2013/12/30 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
js图片上传的封装代码
2017/08/01 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
运动会加油口号
2014/06/07 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
上课说话检讨书
2015/01/27 职场文书
2016年党建工作简报
2015/11/26 职场文书