More than 5 years have passed since last update.

v-cloakが効かない

Posted at 2018-11-14

一瞬表示される {{ hoge }} を隠したい

一瞬下記のような表示がされてしまう。


{{ hoge }}

これを防ぐために、v-cloakディレクティブが用意されている。

このディレクティブは Vue インスタンスが用意されるまでの間、コンパイルされていない Mustache バインディングを隠すのに使うことができます。

※Mustache バインディング ( {{ }} <- これ )

サンプルのとおりにすればよかったものを、下記のように記述した。


<div id="foo" v-cloak style="display:none;">
{{ foo }}
</div>

これだとまったく表示されなかった。

サンプルのとおりに、インラインでスタイルを書かないようにして解決。

<style>
[v-cloak] {
  display: none;
}
</style>

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

v-cloak ディレクティブを使うときは、インラインで display:none; のスタイルを書いちゃだめ。