首页 > 其他分享 >vue数据渲染页面数据展示出现闪烁问题

vue数据渲染页面数据展示出现闪烁问题

时间:2024-07-17 16:53:08浏览次数:8  
标签:vue DOM 渲染 cloak 数据 闪烁 页面

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如

{{value.name}}

在加载的时候会看到

{{value.name}}
原因:由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template,

所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。(别处借来的)
解决办法:

在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak

v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过我的试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以,

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

而且,在css里面要添加

[v-cloak] {
    display: none;
}

这样就可以防止页面闪烁了。

标签:vue,DOM,渲染,cloak,数据,闪烁,页面
From: https://www.cnblogs.com/flablogs/p/18307794

相关文章

  • 基于java+springboot+vue实现的实验室管理系统(文末源码+Lw)127
    基于SpringBoot+Vue的实现的实验室管理系统(源码+数据库+万字Lun文+流程图+ER图+结构图+演示视频+软件包)系统功能:实验室管理系统管理员功能有个人中心,学生管理,教师管理,公告信息管理,知识库管理,实验课程管理,实验室信息管理,实验室预约管理,实验设备管理,采购记录管理,维修记录管理......
  • 基于java+springboot+vue实现的汽车资讯网站(文末源码+Lw)125
    基于SpringBoot+Vue的实现的汽车资讯网站系统(源码+数据库+万字Lun文+流程图+ER图+结构图+演示视频+软件包)系统功能:汽车资讯网站有管理员和用户。管理员功能有个人中心,用户管理,汽车品牌管理,价格分类管理,经销商管理,汽车信息管理,留言板管理,系统管理等。用户可以查看各种汽车信......
  • 基于java+springboot+vue实现的中药实验管理系统(文末源码+Lw)124
    基于SpringBoot+Vue的实现的中药实验管理系统(源码+数据库+万字Lun文+流程图+ER图+结构图+开题报告+演示视频+软件包)系统功能:本中药实验管理系统有管理员,教师,学生,实验员。管理员功能有个人中心,学生管理,教师管理,实验员管理,实验教学管理,在线学习管理,实验信息管理,实验预约管理,实......
  • Django中使用ORM语言对MYSQL数据库插入数据
    1.pycharm终端进入django中的shelldjango项目目录下输入命令:pythonmanage.pyshell2.新增数据2.1使用save()保存导入模型(类)、实例模型、调用save()方法验证结果2.2使用create()导入模型、调用create()方法验证结果2.3使用bulk_create批量新增多条记录导入模型......
  • 基于java+springboot+vue实现的学生选课系统(文末源码+Lw)129
     系统角色:学生、教师、管理员系统功能:管理员管理专业,教师,学生,课程,查看学生选课以及学生成绩信息。教师查询学生,查询课程,审核学生选课信息,为学生学习的课程进行成绩打分学生参与课程选课,查询选课信息,查询已选课程的成绩信息。技术栈:开发语言:JavaJDK版本:JDK8前端......
  • 基于java+springboot+vue实现的中小企业人事管理系统(文末源码+Lw)128
     基于SpringBoot+Vue的实现的中小企业人事管理系统(源码+数据库+万字Lun文+流程图+ER图+结构图+ppt+演示视频+软件包)系统角色:员工、管理员系统功能:管理员登录进入中小企业人事管理系统可以查看首页、个人中心、员工管理、部门信息管理、职位信息管理、福利信息管理、培......
  • 基于java+springboot+vue实现的实验室管理系统(文末源码+Lw)127
     基于SpringBoot+Vue的实现的实验室管理系统(源码+数据库+万字Lun文+流程图+ER图+结构图+演示视频+软件包)系统功能:实验室管理系统管理员功能有个人中心,学生管理,教师管理,公告信息管理,知识库管理,实验课程管理,实验室信息管理,实验室预约管理,实验设备管理,采购记录管理,维修记录......
  • yearrecord——一个类似痕迹墙的React数据展示组件
    介绍一下自己做的一个类似于力扣个人主页提交记录和GitHub主页贡献记录的React组件。下图分别是力扣个人主页提交记录和GitHub个人主页的贡献记录,像这样类似痕迹墙的形式可以比较直观且高效得展示一段时间内得数据记录。然而要从0实现这个功能还是有一些麻烦得,并且该功能可用......
  • 华为高斯数据库openGauss_5.0.2 企业版部署学习
    系统环境欧拉系统官方下载链接openEuler-22.03-LTS-SP4-x86_64-dvd.iso https://mirrors.tuna.tsinghua.edu.cn/openeuler/openEuler-22.03-LTS-SP4/ISO/x86_64/openEuler-22.03-LTS-SP4-x86_64-dvd.iso openEuler下载|openEulerISO镜像|openEuler社区官网 数据库安......
  • 运动会分数统计(数据结构课设)(C语言版)
         本文为数据结构与算法的课程设计《运动会分数统计》的一个分享,使用了顺序表的数据结构。并且将信息以表格的方式打印输出和在txt文件中导入导出。目录1.设计内容和要求2.代码实现1.结构体定义2.全局变量和变量定义3.键盘输入信息4.信息显示5.文件导入导出......