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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
学习Vue组件实例
Apr 28 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 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配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
表格 隔行换色升级版
2009/11/07 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
js实现简单数字变动效果
2017/11/06 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python获取任意xml节点值的方法
2015/05/05 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
优秀生推荐信范文
2013/11/28 职场文书
爱国口号
2014/06/19 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
房屋出租委托书格式
2014/09/23 职场文书
汉语拼音教学反思
2016/02/22 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
python数字类型和占位符详情
2022/03/13 Python