Vue v-cloak 指令
请参阅下面的更多示例。
定义和用法
v-cloak 指令用于隐藏内容，直到编译完成。
通常，v-cloak 会阻止用户在页面加载期间看到预编译内容（包括大括号）的闪烁。
要隐藏预编译的内容，元素会被标记为 v-cloak，并定义 CSS 规则来隐藏此内容，直到编译完成。
v-cloak 指令仅适用于在浏览器中编译的 Vue 代码，因此在处理 SFC (*.vue) 文件时没有用处。
更多示例
示例 1
使用v-cloak在编译完成之前显示红色文本，以便我们更清楚地看到预编译阶段。
<!DOCTYPE html>
<html>
<head>
<title>Vue v-cloak Directive</title>
<style>
[v-cloak] {
color: red;
}
#app {
padding: 10px;
font-size: x-large;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Vue v-cloak 示例</h1>
<p>v-cloak 指令用于使文本变为红色，直至编译完成。 刷新页面，或者点击"运行"按钮，可以更好地看到预编译阶段。</p>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
</body>
</html>
亲自试一试 »
示例 2
使用JavaScript setTimeout() 函数延迟编译一秒，让v-cloak的效果更加清晰。
<!DOCTYPE html>
<html>
<head>
<title>Vue v-cloak Directive</title>
<style>
[v-cloak] {
opacity: 0.5;
}
#app {
padding: 10px;
font-size: x-large;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Vue v-cloak 示例</h1>
<p>使用 JavaScript setTimeout 函数延迟 Vue 编译，使预编译阶段更加清晰。</p>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
}, 1000);
</script>
</body>
</html>
亲自试一试 »
相关页面
JavaScript 参考:Window setTimeout()
