Vue3 防止页面闪烁 v-cloak

简介: Vue3 防止页面闪烁 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 本质上是一个特殊的属性,当页面创建完毕后,就会自动删除这个属性。

相关文章
|
2天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
16 2
|
2天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
10 2
|
2天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
12 1
|
2天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
13 1
|
2天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
8 1
|
3天前
|
JavaScript API
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
13 1
|
2天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
11 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
2天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
12 0
|
2天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
14 0
|
3天前
手写 vue3 的 ref,reactive 和 watchEffect
手写 vue3 的 ref,reactive 和 watchEffect
9 0