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事件模型代码
Jul 01 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
node中的密码安全(加密)
Sep 17 Javascript
node版本管理工具n包使用教程详解
Nov 09 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学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
php常用的工具开发整理
2019/09/26 PHP
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
理解javascript异步编程
2016/01/27 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python实现的自定义多线程多进程类示例
2018/03/23 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
信号生成及DFT的python实现方式
2020/02/25 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python实现手势识别
2020/10/21 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
技能比武方案
2014/05/21 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
2015年幼师工作总结
2015/04/28 职场文书
高中班长竞选稿
2015/11/20 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang