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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
微信{"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(8) php 数组
2010/03/05 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
create-react-app安装出错问题解决方法
2018/09/04 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python实现音乐下载器
2018/04/15 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
flask实现验证码并验证功能
2019/12/05 Python
Python读取YAML文件过程详解
2019/12/30 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
班级学习计划书
2014/04/27 职场文书
2014年采购部工作总结
2014/11/20 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
员工担保书范本
2015/09/22 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
php微信小程序解包过程实例详解
2021/03/31 PHP