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()
