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.


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


Print Share Comment Cite Upload Translate Updates
APA

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/

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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.