Vue

Vue.js テンプレート構文が画面に表示されるのを防ぐ

codepenで開発している際に、マスタッシュが一瞬出てくるのが気になっていた。対処法もちゃんと用意されていたので、試してみる。

v-cloakディレクティブ

cloak: クローク。マント?覆い隠すという意味だろうか。

See the Pen v-cloak by git-cat-meow (@git-cat-meow) on CodePen.

結果

インスタンスの生成を3000ミリ秒遅らせて、視認しやすいようにする。

v-cloakだけで制御されているわけではなく、CSSでdisplay: none;することで非表示状態にしておくという流れ。
CSSは属性セレクタを使用する(v-cloakは属性)。

参考
https://reffect.co.jp/vue/vue-js-v-cloak-directive

カテゴリー: Vue
このサイトの主
投稿を作成しました 115

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る