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连接access数据库的方法
Nov 17 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
快速入门Vue
Dec 19 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
javascript实现简单搜索功能
Mar 26 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语法(3)
2006/10/09 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python help函数实例用法
2020/12/06 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
出纳岗位职责
2013/11/09 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
MySQL创建管理HASH分区
2022/04/13 MySQL