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> <!-- Load Vuejs --> <script src= </script> <style> [v-cloak] { display: none; } </style></head><body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> neveropen </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: 'neveropen' } }) </script></body></html> |
Output:
