【Vue.js】アクセス直後に一瞬現れるマスタッシュが気になる！v-cloakで非表示にしよう

Vue.jsのページにアクセスした時に、{{ }}（マスタッシュ）がチラッと表示されるのが気になったことありませんか。

EDIT ON CODEPENをクリック！

See the Pen vue.js by spica (@spica_blog) on CodePen.

一瞬なので「ん？」と思うだけですが、裏で何かが行われているような気がして気分がいいものではありません。

もちろんVue.jsには解決策があります！

簡単ですのでしっかり覚えておきましょう。

¥3,762 （2022/07/22 22:26時点 | Amazon調べ）

ポチップ

v-cloakディレクティブを設定

<h1>タグにVueインスタンスのデータプロパティ「message」が表示されるHTMLを記述します。

<div id="app">
  <h1>{{ message }}</h1>
</div>

jsファイルでVueインスタンスを作成します。

new Vue({
    el: "#app",
    data: {
      message: 'Vue.js'
    }
  });

この状態でブラウザでHTMLファイルを開いてみましょう。

チラッと{{ message }}とマスタッシュが表示されたと思います。

そしてすぐにデータプロパティのmessage「Vue.js」と表示されましたね。

では、マスタッシュが非表示になる設定をしていきます。

さきほど記述したHTMLの<div>タグに「v-cloak」を追加します。

<div id="app" v-cloak>
  <h1>{{ message }}</h1>
</div>

次に、CSSファイルに非表示の指定「display: none;」を設定します。

[v-cloak] {
  display: none;
}

EDIT ON CODEPENをクリック！

See the Pen Untitled by spica (@spica_blog) on CodePen.

今度は{{ message }}が表示されませんでしたね！

HTMLファイルのdivに「v-cloak」を追加して、CSSファイルにはお馴染み「display: none;」を設定するだけ。

「知らなかった！」という人も、30秒でできちゃいますので今すぐやっておきましょう！

v-cloakディレクティブのポイント

チラッと現れるマスタッシュを表示させない方法をご紹介しました。

とても簡単に解決しましたね。

というか、Vue.jsのほうでなんとかしておいてほしいところですけど…。