如何使Vue.js + Vuetify.js页面元素只显示CSS准备好？

Question

我正在用Vue.js + Vuetify.js创建一个网站

如果我在开发人员工具中模拟“3G”，我可以看到App.vue页面的所有元素（工具栏，抽屉，路由页面元素）在加载过程中不显示CSS。

我用webpack / localhost hot reload npm run dev预览它

我希望首先加载微调器，然后加载其余元素（使用CSS）。我该怎么做呢？

我尝试了v-cloak但它无法正常工作。看起来像是为了隐藏{{ }}。

项目结构

index.html |

<div id="app"></div>

App.vue |

<v-app>
   <loader></loader>

   <div :v-show="false">
       ...
       <v-toolbar>...</v-toolbar>
       <router-view></router-view>
   </div>
</v-app> 

App.vue页面上的这些方法似乎没有解决问题：

 created: function () {show: true}
 mounted: function () {show: true}

附：我是新手，所以我可能会遗漏一些小细节，导致它无法正常工作。

Question:

有人可以表明一个正确的方法吗？

Answer 1

试试这种方式：

<v-app>
   <loader></loader>

   <div v-show="false">
       ...
       <v-toolbar>...</v-toolbar>
       <router-view></router-view>
   </div>
</v-app> 

我认为v-show不起作用，因为你之前使用冒号，就像将动态道具传递给组件而不是使用v-show指令:)