在渲染之前隐藏 vue.js 模板

<div class="loader"> 
  <table class="hidden">
    <tr v-for="log in logs">
      <td>{{log.timestamp}}</td>
      <td>{{log.event}}</td>
    </tr>
  </table>
</div>

var vueLogs = new Vue({
  el: "#checkInLogsHolder",
  data: {logs: []}
});
var holder = $("#checkInLogsHolder");

function response(payload) {
  // hiding the loader animation
  holder.find(".loader").remove();
  // showing the rendered table
  holder.find("table").show();
  vueLogs.logs.unshift(payload);
}

[v-cloak] {
  display: none;
}

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

var vm = new Vue({
  el: "#app",
  created(){
    this.$http.get('url').then(response => {
      // set loader to false
      this.loading = false;
    });
  },
  data: {
    message: 'Hello Vue!',
    loading: true
  }
});

<div v-if="loading">
   Loading...
</div>
<div v-else>
    {{message}}
</div>

<div :class="{'loading': loading}"></div>

Vue.js相关问答推荐

Vutify-v-工具提示-不使用键盘轻击按钮显示

vue js如何将布尔值传到数据库

如何从 Vuex 状态使用 Vue Router？

如何从特定索引呈现 v-for

如何在 Vue 中编译从外部 api 加载的模板

如何在 vue.js 模板中显示空间而不是 undefined 和 null？

如何有条件地更改 vue/vuetify 文本字段 colored颜色

更新 v-for 中使用的数组内的对象时，Vue js react性问题

请求正在进行时显示加载器

如何打破 vue.js 中的 v-for 循环？

如何将 Angular 和 Vue 项目合并在一起？

使用 nuxt，如何将路由名称放在页面标题中？

如何使用vue.js/nuxt.js获取一个目录下的所有图片文件

Vue.js 的 $emit 和 $dispatch 有什么区别？

单击时交换组件

Vuetify - 如何进行分页？

使用 puppeteer 生成 PDF 而不保存

VueJS 2 + ASP.NET MVC 5

升级到 vue-cli 3 后，HTML 中的空格消失了

为什么 router.currentRoute.path 没有react？