Vue.js

【vue.js】v-cloakを使ってアクセス直後のマスタッシュ構文のチラつきを解消する方法

問題点

vue.jsのページにアクセスすると一瞬、画面上にマスタッシュ構文が表示されてから出力されるため、表示がチラつく。

解決方法

v-cloakとCSSを組み合わせることでv-cloakが、Vueインスタンスを生成する間、Vueオブジェクトと紐づけてる処理や変数を隠すことができる。

HTML部分

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

CSS部分

[v-cloak] {
  display: none;
}

Vueインスタンスの作成中には要素に属性としてv-cloakディレクティブが設定された状態となり、インスタンス作成が完了すると要素から消える。

ABOUT ME
ytakeuchi
都内在住のフロントエンドエンジニア。2016年からフリーランスとして活動中。座右の銘は「昨日よりも楽に」。好きな言葉は「効率化」。こんな性格なのでプライベートではGoogle Apps Scriptばかり触っています。