変数情報の表示を防ぐ方法について

Question

vue.js側で定義した変数を用いて、例えば<div class="test">({{ test}})</div>のようなコードをHTML側で設定した場合、更新をかけると一瞬({{ test}})の部分が画面に表示されてしまいます。
こちらの現象を防ぐ方法はありませんでしょうか...?

Answer 1

v-cloakディレクトリが有効です。

API- Vue.js

このディレクティブは関連付けられた Vue インスタンスのコンパイルが終了するまでの間残存します。[v-cloak] { display: none } のような CSS のルールと組み合わせて、このディレクティブは Vue インスタンス が用意されるまでの間、コンパイルされていない Mustache バインディングを隠すのに使うことができます。

  <div v-cloak>
    {{ message }}
  </div>

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

Comments

[jjj001]

ご回答ありがとうございます。
> v-clock
このようなディレクティブもあったのですね。
勉強になりました。

[maisumakun]

clockではなくてcloakですね。

[azukiazusa]

ご指摘ありがとうございます！
修正いたしました。