当前位置: 首页 > news >正文

vue项目 初始化 解决页面闪屏问题 v-cloak

vue指令:v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)

项目中:vue使用axios请求使用Loading时,请求时页面闪动。
解决方案:
在最外层的标签上添加就可以加上v-cloak

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

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

而且,在css里面要添加

[v-cloak] {
  display: none;
}

或者这样

<div class="nav_menu" v-cloak>
        <nav-menu></nav-menu>
   </div>

样式

[v-cloak] {
    display: none;
}

但是有的时候会不起作用,可能的原因有二:
1 v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级。加 !important;

[v-cloak] {
display: none !important;
}

2 样式放在了@import引入的css文件中。

v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中

相关文章:

  • Excle中LOOKUP经典用法
  • vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch
  • 前端——运用@media实现网页自适应中的几个关键分辨率
  • vue3 实现 todoList 知识点 reactive, toRefs, computed, watchEffect, filters,localStorage数据存储、获取
  • vue 项目 前端 模拟后端接口数据(vue2,vue3)
  • JSON.toJSONString的jar包问题
  • vue3-cli创建项目后每个文件的第一行都爆红,或者每个文建都 : No Babel config file detected for...
  • vue3路由传参 query 、params
  • Dom4j把xml转换成Map(非固定格式)
  • vue2 和 vue3 的 路由守卫
  • Android EventBus 3.0.0 使用总结
  • vue3 中vuex状态管理
  • 用过属性来给标签加样式
  • vue2和vue3 的 keep-alive的用法
  • php地址赋值值和传值赋值
  • [译]CSS 居中(Center)方法大合集
  • Android单元测试 - 几个重要问题
  • conda常用的命令
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • JavaScript设计模式系列一:工厂模式
  • Meteor的表单提交:Form
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • orm2 中文文档 3.1 模型属性
  • React的组件模式
  • Redis 中的布隆过滤器
  • SpiderData 2019年2月13日 DApp数据排行榜
  • windows下mongoDB的环境配置
  • 聊聊hikari连接池的leakDetectionThreshold
  • 浅谈Golang中select的用法
  • 使用 Xcode 的 Target 区分开发和生产环境
  • 思否第一天
  • 微信小程序:实现悬浮返回和分享按钮
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • #Z0458. 树的中心2
  • #宝哥教你#查看jquery绑定的事件函数
  • $.extend({},旧的,新的);合并对象,后面的覆盖前面的
  • (70min)字节暑假实习二面(已挂)
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (论文阅读笔记)Network planning with deep reinforcement learning
  • (四)Controller接口控制器详解(三)
  • (转)Linux NTP配置详解 (Network Time Protocol)
  • (转)ObjectiveC 深浅拷贝学习
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • (转载)Linux网络编程入门
  • .apk 成为历史!
  • .gitignore
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .NET Framework 服务实现监控可观测性最佳实践
  • .NET 简介:跨平台、开源、高性能的开发平台
  • .NET/ASP.NETMVC 大型站点架构设计—迁移Model元数据设置项(自定义元数据提供程序)...
  • .net6 webapi log4net完整配置使用流程