Vue.js v-cloakのサンプルコード

Vue.js v-cloakのサンプルコード

v-cloakを利用して、バインディングされる前に mastache構文( {{hoge}} ) が表示されないようにするサンプルコード

環境

  • OS  Windos10
  • エディタ VScode

サンプルコード

下記のソースコードをindex.htmlとして作成して保存します。

vue.jsは下記の開発バージョンのものを利用してます <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

保存したファイルをブラウザで開いて確認 。

js部の setTimeout で3秒後にバインディングが開始される。
v-cloakなしの方は{{name}}が表示される

3秒後。v-cloakありの方も、なしも方もバインディングされる