時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

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

記事内に広告を含みます

パソ君
パソ君

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

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

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

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

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

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

ジト
ジト

すぐにできるよ!

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

この記事でわかること

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

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

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

<div id="app">
  <p v-cloak>{{ message }}</p>
</div>
[v-cloak] {
  visibility: hidden;
}
const app = Vue.createApp({
  data: () => ({
    message: 'おはようございます'
  })
}).mount('#app')

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

  • 「v-cloak」ディレクティブをHTMLに記述
  • 「v-cloak」ディレクティブをCSSで非表示にする

順に解説してきます。

➀:「v-cloak」ディレクティブをHTMLに記述

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

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

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

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

➁:「v-cloak」ディレクティブをCSSで非表示にする

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

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

[v-cloak] {
  visibility: hidden;
}
[]で囲んで指定しましょう。

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

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

【解説】CSSで表示・非表示にする方法3選【切り替えアニメーションあり】

つまりこういうこと

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

  • Vueインスタンスのコンパイルが終わるまで
    (マスタッシュ構文{{}}が見えてる一瞬)
    「v-cloak」ディレクティブが付与される
  • 「v-cloak」がついてる要素をCSSをで非表示にする
  • コンパイルが終わると「v-cloak」ディレクティブが外れる
  • CSSの対象要素ではなくなるので表示される

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

  • 「v-cloak」ディレクティブをHTMLに記述
  • 「v-cloak」ディレクティブをCSSで非表示にする
ジト
ジト

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA