当前位置: 首页 > 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/a/162047.html

相关文章:

  • DevOps工程技术价值流:加速业务价值流的落地实践与深度赋能
  • 更改Ubuntu22.04锁屏壁纸
  • 【算法】——二分查找合集
  • NVIDIA Isaac Sim 仿真平台体验测评
  • AcWing 302 任务安排 斜率优化的dp
  • 软件测试面试2024最新热点问题
  • 通讯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语言验证哥德巴赫猜想