More than 1 year has passed since last update.

Vue.jsのローディング中に、テンプレートを見せたくない！

Last updated at 2022-05-30Posted at 2021-09-30

Vue.jsのローディング中、{{text}}⇦まま表示されてしまう問題を解決します！

結論: v-cloakにstyleを設定する
htmlのcssをゴニョゴニョすればいい感じでできます！

やり方👇

main.js

const App = {
  data() {
    return {
      text: "aaaa"
    }
  }
}

index.html

-<div id="app">
-    <p>{{text}}</p>
-</div>
+<div id="app" v-cloak>
+    <p>{{text}}</p>
+</div>

styles.css

+[v-cloak] {
+  display: none;
+}