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 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
TypeScript入门-接口
Mar 30 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript GUID生成器实现代码
2009/10/31 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
js运动事件函数详解
2016/10/21 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
react基本安装与测试示例
2020/04/27 Javascript
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
网上书店创业计划书
2014/01/12 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
公司投资建议书
2014/05/16 职场文书
信息合作协议书
2014/10/09 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
mysql创建存储过程及函数详解
2021/12/04 MySQL
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android