La directiva v- cloak es una directiva de Vue.js que permanecerá en el elemento hasta que la instancia de Vue asociada finalice la compilación. Combinada con reglas CSS como [v-cloak] { display: none } , esta directiva se puede usar para ocultar enlaces de bigote sin compilar hasta que la instancia de Vue esté lista. Primero, crearemos un elemento div con id como app y aplicaremos la directiva v-cloak a un elemento.
Modelo:
<element v-cloak>
// content....
</element>
CSS:
[v-cloak] {
display: none;
}
Parámetros: Esta función no acepta ningún parámetro.
Ejemplo: este ejemplo usa Vue.js para mostrar el funcionamiento de los datos con v-cloak para que se vuelvan visibles solo cuando se complete la compilación.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Vuejs -->
<script src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</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>
Producción:
