Vue v-cloak 解决页面闪烁
Vue About 810 words现象
在非工程化的项目中(直接引入Vue.js
文件在HTML
文件中使用),如果有耗时操作没让页面加载完,会显示{{}}
,且页面会刷新。
v-cloak
使用v-cloak
可以解决这类问题。通常与display: none
一起使用,在未加载完成前不显示DOM
,加载完成后再显示。
CSS
上可以配合!important
一起使用。
备注:工程化的项目(使用vue-cli
创建的项目)不需要v-cloak
,因为已经有一个空的div
。
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue@2.6.12.js"></script>
<style>
[v-cloak]{
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{ message }}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "zhangsan"
},
});
</script>
</body>
</html>
参考
Views: 1,122 · Posted: 2023-01-02
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...