Vue.jsで初期表示時、コンパイル前の変数が表示されてしまうのを避ける対応(v-cloak)

シェアする

フリーランスエンジニアの収入例を見てみる→ IT系フリーエンジニア案件6000件以上【ギークスジョブ】

Vue.jsを初期表示時、コンパイル前のVue.jsのマスタッシュ記法の変数やなどが表示され、どうにかならないかと思ったことは無いでしょうか?

このような際、v-cloakのディレクティブを使用すると、データバインディング完了までこのディレクティブがつけられた要素の描画は遅れさせることができます。
v-cloakはcomponentのコンパイルが終わるまで、v-cloakを指定したタグを非表示にする機能です。

上記の例の場合、マスタッシュ記法の変数などを仕込んだhtmlにv-cloakというディレクティブを付与し、CSSの属性セレクタでdisplay:none;を指定しておくで、このディレクティブがつけられた要素の描画を遅らせることが出来ます。

上記の例の場合は、demoのidの部分の描写を遅らせることができ、ブラウザで初期表示時にマスタッシュ記法で記載した変数の描写をコンパイルが終わるまで表示させないことができます。