This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
in this article, you will learn how to use the V-cloak directive in Vue.
In simple terms, the v-cloak directive is used to hide an element while vue is mounting; it works best with a CSS property.
Here is a basic instance of using the directive:
we first declare a property in our css that makes reference to the cloak:
<style scoped>
[v-cloak] {
display: none;
}
</style>We then add the v-cloak directive to the intended element.
<template>
<div v-cloak>
<p>Hello there, I am {{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: "Jane Doe"
};
},
};
</script>
<style scoped>
[v-cloak] {
display: none;
}
</style>The post Using the V-cloak directive in Vue appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Prince Chukwudire | Sciencx (2021-03-03T16:25:31+00:00) Using the V-cloak directive in Vue. Retrieved from https://www.scien.cx/2021/03/03/using-the-v-cloak-directive-in-vue/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.