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 标签直到实例准备完毕。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了v-show和v-if的区别及应用场景，vue中v-show与 v-if的作用效果是相同的，都能控制元素在页面是否显示，但是也有一定的区别，下面文章梳理总结v-show和v-if的区别，需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了vue-cli中使用高德地图的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-08-08
vue项目启动后,js-base64依赖报错Cannot read properties
这篇文章主要介绍了vue项目启动后,js-base64依赖报错Cannot read properties of null(reading ‘replace’)问题,2024-05-05
vue3+elementui-plus实现无限递归菜单示例代码
这篇文章主要介绍了vue3+elementui-plus实现无限递归菜单,当一个组件的 key 值发生变化时,Vue 会认为这是一个新的组件实例,会强制重新创建和渲染这个组件,本文通过示例代码详细讲解,需要的朋友可以参考下2024-04-04
这篇文章主要为大家介绍了Vue 入口与 initGlobalAPI实例剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了解决ElementUI中tooltip出现无法显示的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题
这篇文章主要介绍了vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
今天在移动端项目中遇见一个需求,需要数据无限滚动,所以下面这篇文章主要给大家介绍了关于手写vue无限滚动指令的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
Vue 是一个非常流行和强大的前端框架，它让我们可以用简洁和优雅的方式来构建用户界面，今天我们来分享一个 Vue 中非常经典的问题，也是一个非常实用的技巧，希望对大家有所帮助2023-07-07
最新评论