Vue.js v-cloak Directive
Last Updated :
07 Jun, 2022
The v-cloak directive is a Vue.js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready. First, we will create a div element with id as app, and let’s apply the v-cloak directive to an element.
Syntax:
Template:
<element v-cloak>
// content....
</element>
CSS:
[v-cloak] {
display: none;
}
Parameters: This function doesn’t accept any parameter.
Example: This example uses Vue.js to show the working of the data with v-cloak so that it becomes visible only when the compilation completes.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< style >
[v-cloak] {
display: none;
}
</ style >
</ head >
< body >
< div style = "text-align: center;width: 600px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
VueJS | v-cloak directive
</ b >
</ div >
< div id = "canvas" style=
"border:1px solid #000000;
width: 600px;height: 200px;">
< div id = "app" style=
"text-align: center;
padding-top: 40px;">
< h1 v-cloak>{{ data }}</ h1 >
</ div >
</ div >
< script >
var app = new Vue({
el: '#app',
data: {
data: 'GeeksforGeeks'
}
})
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...