MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. v-cloak

v-cloak

Vue.js
2023.08.07

v-cloakは、バインドしてページを読み込む際に{{ }}構文が一瞬表示されるのを防ぐディレクティブになります。

v-cloakの説明図
記法

[ HTML ] =============================
　<要素名 v-cloak>{{ データプロパティ名 }}</要素名>

[ CSS ] ==============================
　[v-cloak] {
　　display:none;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/cloak.css" />
    <title>v-cloakについて</title>
  </head>
  <body>
    <div id="app">
      <p v-cloak>{{ message }}</p>
    </div>

    <script src="./js/cloak.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      message: "こんにちは",
    };
  },
}).mount("#app");
[v-cloak] {
  display: none;
}

[ローカル上で確認してみましょう]
index.htmlの11行目を以下に変更
　<p>{{ message }}</p>
※リロードする際に一瞬チラつきます

Vue.js