分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

vue.js页面刷新出现闪烁问题的解决

发布时间:2023-09-06 01:58责任编辑:赖小花关键词:js

因为浏览器是html从上到下执行,先执行Dom元素,然后执行javaScript元素,v-show、v-if实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话,会显示的特别明显。

以上两个问题都可以使用以下的方案来解决。

在css中定义

[v-cloak] {
   display:none;

}

在v-if中加上v-cloak即可解决.

示例:

[v-cloak] {
display: none; 
<div v-cloak>
{{ message }}
</div>

原理:

带有v-clock的的元素设置为display:none,隐藏掉,在等到vue解析到带有v-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁。

vue.js页面刷新出现闪烁问题的解决

原文地址:https://www.cnblogs.com/wnsry/p/9132398.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved