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 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
jQuery的position()方法详解
Jul 19 Javascript
json数据处理及数据绑定
Jan 25 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
react如何快速设置文件路径别名
Apr 28 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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php mysql 封装类实例代码
2016/09/18 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP反射基础知识回顾
2020/09/10 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
结构工程研究生求职信
2013/10/13 职场文书
夜大自我鉴定
2013/10/31 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
企业环保标语
2014/06/10 职场文书
社区反邪教工作方案
2014/06/16 职场文书
党员检讨书
2014/10/13 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
python元组打包和解包过程详解
2021/08/02 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
Python Pygame实战之塔防游戏的实现
2022/03/17 Python