Question

<template>
    <div id="app">
      <Loading></Loading>
      <Content></Content>
    </div>
</template>

<script>
import Loading from './Loading.vue'
import Content from './Content.vue'

export default {
  name: 'App',
  components: {
    Loading,
    Content
  }
}
</script>

在加载所有页面时，处理加载组件并将其删除（或vue组件或更改样式）的最佳和优雅方法是什么？

我试过v-cloack，但我认为它不能超越数据。我尝试使用已安装，但似乎无法正常工作。

Answer 1

v-cloak是隐藏未编译的胡须绑定，直到Vue实例准备就绪。因此，您可以使用v-if来显示/隐藏加载组件。

＆＃13;

var child1 = Vue.extend({
    template: "<div>Loading...</div>"
});
var child2 = Vue.extend({
    template: "<div>After Component loaded</div>",
});
var app = new Vue({
    el: "#vue-instance",
    data: {
        loading: true
    },
    mounted() {
    		var vm =  this;
    		setTimeout(function() {
          vm.loading = false;
				}, 1000);
    },
    components: {
        child1,
        child2
    },
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
    <child1 :name="name" v-if="loading"></child1>
    <child2 :name="name" v-if="!loading"></child2>
</div>

＆＃13;

Vue：当其他组件完全加载时删除组件

1 个答案: