Vue v-if/v-show/插值表达式导致闪现的起因及处理办法

  • 时间:2018-10-14 23:01 作者:前端全栈架构丶 来源:前端全栈架构丶 阅读:265
  • 扫一扫,手机访问
摘要:Vue v-if/v-show/插值表达式导致闪现的起因及处理办法出处:https://www.jianshu.com/p/dddd7d2e44bc?utm_source=tuicool&utm_medium=referral在开发过程中经常会发现当页面明明不应该出现的元素或者内容会闪现一下

Vue v-if/v-show/插值表达式导致闪现的起因及处理办法

出处:https://www.jianshu.com/p/dddd7d2e44bc?utm_source=tuicool&utm_medium=referral

在开发过程中经常会发现当页面明明不应该出现的元素或者内容会闪现一下而后消失,最近研究了一下这个问题的起因和处理办法,这里和大家分享一下。

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/插值表达式导致闪现的起因及处理办法

carbon (3).png

接下来在CSS中定义隐藏样式就可:

Vue v-if/v-show/插值表达式导致闪现的起因及处理办法

到这里,这个问题就处理了。Vue是前台技术的一次大的跃进,有坑并不可怕,相信办法总比问题多。

对前台的技术,架构技术感兴趣的同学关注我的头条号,并在后端私信发送关键字:“前台”就可获取免费的架构师学习资料

知识体系已整理好,欢迎免费领取。还有面试视频分享可以免费获取。关注我,可以取得没有的架构经验哦!!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
【系统环境|软件环境】前台开发WebStorm常用快捷键,火速收藏!(2019-12-04 14:25)
【系统环境|软件环境】微博H5登录和发微博组件(2019-12-04 14:25)
【系统环境|软件环境】5分钟谈前台面试,小伙伴都惊呆了(2019-12-04 14:23)
手机二维码手机访问领取大礼包
返回顶部