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:
