【解決】Vue.jsのマスタッシュ構文{{}}ちらつきを非表示【v-cloak】

2024年4月27日

記事内に広告を含みます

パソ君

・マスタッシュ構文の{{}}が一瞬見えるんだけど非表示にできる？

こんな疑問にお答えします。

Vueにて{{変数名}}というマスタッシュ構文を用いて、表示することありますよね。

ただアクセス時に{{}}が、一瞬ちらついてしまう。

ほんとに一瞬なので影響はないですが、ユーザー側からしたら少し気になるかもしれません。

実はこのマスタッシュ構文のちらつきは、非表示にすることが可能です。

ジト

すぐにできるよ！

ということで、この記事では「マスタッシュ構文{{}}ちらつきを非表示にする方法」について解説していきます！

この記事でわかること

マスタッシュ構文{{}}ちらつきを非表示

そんなマスタッシュ構文のちらつきを非表示にするコードがこちら↓

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

[v-cloak] {
  visibility: hidden;
}

const app = Vue.createApp({
  data: () => ({
    message: 'おはようございます'
  })
}).mount('#app')

コードの中で重要な点がこちら↓

順に解説してきます。

ますマスタッシュ構文のちらつきを非表示にしたいHTML部分に対して、「v-cloak」ディレクティブを記述します。

今回は例としてpタグ部分に付与しました。

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

「v-cloak」ディレクティブとは、Vueインスタンスのコンパイルが終わるまで要素に残るのが特徴です。

あとは「v-cloak」ディレクティブに対して、CSSを使って非表示にすれば完成です。

今回は例としてvisibilityにて表示にしました。

[v-cloak] {
  visibility: hidden;
}

[]で囲んで指定しましょう。

「display:none」を用いての非表示でも良いですが、それだと高さが取得できずに崩れが生じる場合も。。

そのため「visibility」や「opacity」を用いて非表示にする方法が良いらしいとのこと。（場合によります）

つまり下記になるので、マスタッシュ構文のちらつきを非表示にできます↓

【解決】Vue.jsのマスタッシュ構文{{}}ちらつきを非表示【v-cloak】：まとめ

ジト

マスタッシュ構文{{}}ちらつきを非表示にしたい時はためしてみてね！