Using the V-cloak directive in Vue

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…

The post Using the V-cloak directive in Vue appeared first on CodeSource.io.

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.


Print Share Comment Cite Upload Translate
APA
Prince Chukwudire | Sciencx (2024-03-28T20:07:18+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/.
MLA
" » Using the V-cloak directive in Vue." Prince Chukwudire | Sciencx - Wednesday March 3, 2021, https://www.scien.cx/2021/03/03/using-the-v-cloak-directive-in-vue/
HARVARD
Prince Chukwudire | Sciencx Wednesday March 3, 2021 » Using the V-cloak directive in Vue., viewed 2024-03-28T20:07:18+00:00,<https://www.scien.cx/2021/03/03/using-the-v-cloak-directive-in-vue/>
VANCOUVER
Prince Chukwudire | Sciencx - » Using the V-cloak directive in Vue. [Internet]. [Accessed 2024-03-28T20:07:18+00:00]. Available from: https://www.scien.cx/2021/03/03/using-the-v-cloak-directive-in-vue/
CHICAGO
" » Using the V-cloak directive in Vue." Prince Chukwudire | Sciencx - Accessed 2024-03-28T20:07:18+00:00. https://www.scien.cx/2021/03/03/using-the-v-cloak-directive-in-vue/
IEEE
" » Using the V-cloak directive in Vue." Prince Chukwudire | Sciencx [Online]. Available: https://www.scien.cx/2021/03/03/using-the-v-cloak-directive-in-vue/. [Accessed: 2024-03-28T20:07:18+00:00]
rf:citation
» Using the V-cloak directive in Vue | Prince Chukwudire | Sciencx | https://www.scien.cx/2021/03/03/using-the-v-cloak-directive-in-vue/ | 2024-03-28T20:07:18+00:00
https://github.com/addpipe/simple-recorderjs-demo