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