LoginSignup
58

More than 5 years have passed since last update.

vue.js の {{name}} とかが html に表示されるのを防ぐ(v-cloak)

Posted at

なんだかんだ vue.js 派です(既存プロジェクトに組み込みやすいあたりが。この辺り記事にしたいかも)。

普通だと {{name}} って表示されちゃってちょっとみっともないのが、HTML タグに v-cloak を付けて下記のような CSS を書くと binding が済むまで非表示にできます。

<p>※5秒後にbindingされます</p>

<ul>
  <li>v-cloak ある版 : <span id="user1" v-cloak>{{name}}</span></li>
  <li>v-cloak ない版 : <span id="user2">{{name}}</span></li>
</ul>
setTimeout(function() {
  new Vue({
    el: "#user1",
    data: {
      name: "user1"
    }
  });
  new Vue({
    el: "#user2",
    data: {
      name: "user2"
    }
  });
}, 5000);
[v-cloak] {
  display: none;
}

サンプル(jsbin)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
58