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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
js如何验证密码强度
Mar 18 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
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
js innerHTML 改变div内容的方法
2013/08/03 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
PHP如何自定义函数
2016/09/16 面试题
初二物理教学反思
2014/01/29 职场文书
捐资助学倡议书
2014/04/15 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
初中思想品德教学反思
2016/02/24 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
PHP中多字节字符串操作实例详解
2021/08/23 PHP
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技