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

Vue 防止页面闪烁 v-cloak

v-cloak 指令:用于解决页面渲染的过程中,出现闪烁的问题。

注:当网速较慢,来不及渲染时,页面上就会出现源码【例如:{{ xxx }} 】。

语法格式:

<template>
  <div v-cloak>内容</div>
</template>

<style scoped>
[v-cloak] {
  display: none !important;
}
</style>

基础使用:

<template>
  <h3>防止页面闪烁 v-cloak</h3>
  <div v-cloak>{{ name }}</div>
</template>

<script setup>
import { ref } from "vue";
let name = ref("张三");
</script>

<style scoped>
[v-cloak] {
  display: none !important;
}
</style>

:v-cloak 本质上是一个特殊的属性,当页面创建完毕后,就会自动删除这个属性。

原创作者:吴小糖

创作时间:2023.12.7 


http://www.kler.cn/news/162047.html

相关文章:

  • 通讯app:
  • Maven基础知识
  • ingress介绍和ingress通过LoadBalancer暴露服务配置
  • GateWay的路由与全局过滤器
  • Linux中的网络时间服务器
  • 新书推荐——《Copilot和ChatGPT编程体验:挑战24个正则表达式难题》
  • 『TypeScript』从零开始编写你的第一个TypeScript程序
  • HomeAssistant添加HACS插件并实现公网控制米家,HomeKit等智能家居
  • Linux——操作系统与进程的基础概念
  • python学习:opencv学习和numpy学习(持续更新)
  • python pandas dataframe常用数据处理总结
  • macOS 获取文件夹大小
  • 【学习记录】从0开始的Linux学习之旅——字符型设备驱动及应用
  • 常用性能工具与性能分析
  • 05 JQuery基础入门
  • 时间序列预测实战(二十二)TCN-LSTM实现单元和多元长期预测(专为新手编写的自研架构)
  • Qt实现右键菜单
  • Java研学-Lambda表达式
  • Python函数默认参数设置
  • C语言验证哥德巴赫猜想
  • AttributeError: module ‘importlib_resources‘ has no attribute ‘path‘ 解决方案
  • cpu 300% 爆满 内存占用不高 排查
  • 【AIGC】prompt工程从入门到精通
  • 专业130+总分400+云南大学通信847专业基础综考研经验(原专业课827)
  • 获取拼多多京东淘宝商品数据店铺数据店铺信息最推荐最好用的一种方式就是API接口
  • HTTPS加密协议:保护你的网络安全
  • ArcGIS Pro中怎么设置标注换行
  • yum源不起作用_yum无法安装程序_Linux默认源替换---Linux工作笔记067
  • YOLOv7独家最新改进《全网无重复》感知聚合SERDetect检测头:高效涨点,即插即用|检测头新颖改进
  • type property can‘t be changed 报错问题解决