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 相关文章推荐
css配合jquery美化 select
Nov 29 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
Python 正则表达式操作指南
2009/05/04 Python
使用python绘制人人网好友关系图示例
2014/04/01 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python入门必须知道的11个知识点
2018/03/21 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
浅析Python四种数据类型
2018/09/26 Python
python实现滑雪游戏
2020/02/22 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
《识字五》教学反思
2014/03/01 职场文书
答谢会策划方案
2014/05/12 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
大学学生个人总结
2015/02/15 职场文书
2015年教务主任工作总结
2015/07/22 职场文书