vue刷新后瞬间闪烁,无法解析的问题
更新时间：2023年11月09日 14:21:53 作者：donggua_123
这篇文章主要介绍了vue刷新后瞬间闪烁,无法解析的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue刷新瞬间闪烁,无法解析问题
在使用vue的时候写了一段代码
每次刷新的瞬间会无法解析，也只是一闪而已，但是体验非常不好，查阅了资料后发现是由于vue编译的时候是先渲染然后再根据v-show来条件隐藏，那样就会出现看得见的一瞬间，并且显示还在编译之前，这就导致本来刷新的时候要隐藏的元素有一瞬间的显示，而且还是未被编译的状态。
解决这个问题很简单
在内容标签上添加v-cloak属性，并配合css中[c-cload]{display: none;}使用即可。
这样就解决啦！当然其它出现闪烁未编译的情况处理方法类似。
官方给出的该属性的解释是：
这个指令保持在元素上直到关联实例结束编译。
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Print.js一个小的javascript库,可帮助您从网络上打印,这篇文章主要给大家介绍了关于printJS打印问题汇总以及解决办法的相关资料,文中介绍的非常详细,需要的朋友可以参考下2024-05-05
vue element-ui 绑定@keyup事件无效的解决方法
遇到vue element-ui 绑定@keyup事件无效的问题怎么解决？下面小编就为大家分享一篇vue element-ui 绑定@keyup事件无效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Vue+Element实现表格单元格编辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了如何使用vue3实现一个高德地图天气小组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用，文中通过实例介绍的非常详细，并在文末给出了源码下载，需要的朋友可以下载学习参考，下面来一起看看吧。2017-03-03
Vue2为何能通过this访问到data与methods的属性
这篇文章主要介绍了Vue2为何能通过this访问到data与methods的属性，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
文章介绍了一个使用Vue和Element UI仅在前端实现增删改功能的示例,未涉及后端知识,主要分为编辑、新增和删除方法,并提供了全部代码2026-03-03
这篇文章主要介绍了VUE前端实现token的无感刷新方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Keep-Alive模式避免频繁创建、销毁链接，允许多个请求和响应使用同一个HTTP链接，这篇文章主要介绍了vue2.x中keep-alive源码解析,需要的朋友可以参考下2023-02-02
Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，本文讲给大家详细分析Vue路由Hash模式，文中有相关的代码示例供大家参考，感兴趣的同学可以借鉴一下2023-06-06
最新评论