Vue v-cloak 指令
查看下面的更多示例。
定义和用法
The v-cloak 指令用于隐藏内容，直到编译完成。
通常，v-cloak 阻止用户看到页面加载过程中预编译内容（包括花括号）的闪烁。
为了隐藏预编译内容，元素被标记为 v-cloak，并且定义 CSS 规则来隐藏此内容，直到编译完成。
The 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()
