Chỉ thị V-cloak
Ví dụ
Sử dụng v-cloak
để ẩn nội dung được biên dịch trước.
<div id="app" v-cloak>
{{ message }}
</div>
Hãy tự mình thử »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-cloak
được sử dụng để ẩn nội dung cho đến khi biên dịch xong.
Thông thường, v-cloak
ngăn người dùng nhìn thấy nội dung được biên dịch trước nhấp nháy, bao gồm cả dấu ngoặc nhọn trong quá trình tải trang.
Để ẩn nội dung được biên dịch trước, phần tử được đánh dấu bằng v-cloak
và các quy tắc CSS được xác định để ẩn nội dung này cho đến khi quá trình biên dịch hoàn tất.
Lệnh v-cloak
chỉ hoạt động đối với mã Vue được biên dịch trong trình duyệt, vì vậy nó không hữu ích khi làm việc với các tệp SFC (*.vue).
Thêm ví dụ
ví dụ 1
Sử dụng v-cloak
để hiển thị chữ màu đỏ trước khi quá trình biên dịch hoàn tất, để chúng ta có thể thấy rõ hơn giai đoạn tiền biên dịch.
<!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 Example</h1>
<p>The v-cloak directive is used to make the text red until the compilation is complete. Refresh the page, or click the "Run" button, to see the pre-compilation phase better.</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>
Hãy tự mình thử »Ví dụ 2
Sử dụng hàm JavaScript setTimeout()
để trì hoãn quá trình biên dịch một giây để hiệu ứng từ v-cloak
trở nên rõ ràng hơn.
<!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 Example</h1>
<p>Using the JavaScript setTimeout function to delay the Vue compilation to make the pre-compilation phase even more clear.</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>
Hãy tự mình thử »Trang liên quan
Tham khảo JavaScript: Window setTimeout()