这个指令保持在元素上直到关联组件实例结束编译
和 CSS 规则如 [v-cloak] { display: none } 一起用时
这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕

  1. <style>
  2.   [v-cloak] {
  3.     display: none;
  4.   }
  5. </style>
  7. <div id="app" v-cloak>
  8.   <h1>{{ name }}</h1>
  9. </div>

Vue2

  1. const App = {
  2.   el: '#app',
  3.   data() {
  4.     return {
  5.       name: '沐颖汐',
  6.     }
  7.   },
  8. }

Vue3

  1. const App = {
  2.   data() {
  3.     return {
  4.       name: '沐颖汐',
  5.     }
  6.   },
  7. }
  8. Vue.createApp(App).mount('#app')