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 指令</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 指令</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()
