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 继承机制的实现(待续)
May 18 Javascript
js中eval详解
Mar 30 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
node.js从数据库获取数据
May 08 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
微信{"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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
javascript中的几个运算符
2007/06/29 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
easy_install python包安装管理工具介绍
2013/02/10 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Django websocket原理及功能实现代码
2020/11/14 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
高中教师先进事迹材料
2014/08/22 职场文书
见习报告格式范文
2014/11/08 职场文书
颐和园导游词400字
2015/01/30 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
跳高加油稿
2015/07/21 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP