Vue 防止页面闪烁 v-cloak

2023-12-13 03:36:12

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?

文章来源:https://blog.csdn.net/xiaowude_boke/article/details/134864709
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。