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 jquery做的图片连续滚动代码
Jan 06 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
layui select动态添加option的实例
Mar 07 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
医学毕业生自荐信
2013/10/11 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
优秀公益广告词大全
2014/03/19 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书