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 

相关推荐

  1. Vue 防止页面闪烁 v-cloak

    2023-12-08 07:18:05       55 阅读
  2. vue页面跳转过渡动画与防止抖动

    2023-12-08 07:18:05       37 阅读
  3. CachedNetworkImage 在listview 返回页面闪烁问题

    2023-12-08 07:18:05       33 阅读
  4. vue页面应用?

    2023-12-08 07:18:05       41 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-08 07:18:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-08 07:18:05       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-08 07:18:05       82 阅读
  4. Python语言-面向对象

    2023-12-08 07:18:05       91 阅读

热门阅读

  1. 深度学习毕设思路--yolov5的使用方法

    2023-12-08 07:18:05       51 阅读
  2. 业务增长产品经理常用的ChatGPT通用提示词模板

    2023-12-08 07:18:05       69 阅读
  3. Glide系列-活动缓存和内存缓存

    2023-12-08 07:18:05       46 阅读
  4. 笙默考试管理系统-MyExamTest----codemirror(47)

    2023-12-08 07:18:05       51 阅读
  5. leetcode每日一题37

    2023-12-08 07:18:05       55 阅读
  6. 神经网络----网络模型的加载及保存

    2023-12-08 07:18:05       45 阅读
  7. ffmpeg学习日记619-指令-透明通道视频相关指令

    2023-12-08 07:18:05       59 阅读