Question

代码在：VueJS

您好，

我很好奇如何一次展示一个组件，然后又不再展示一个组件。我尝试了v-if和v-model，但似乎都没有。这是我的代码：

<template  >

    <div id="fakeLoader" v-if="show"></div>
</template>

<script>
import $ from 'jquery'
import '../../bower_components/fakeLoader/fakeLoader.min'

export default {
  name: 'Fakeloader',
  data() {
    return {
      show: true
    };
  },
  methods: {
    showLoader() {
      this.show = false;
    }
  },
  mounted () {
    $(document).ready(function () {
      // Init Fakeloader
      $('#fakeLoader').fakeLoader({
        timeToHide: 800,
        spinner: 'spinner5',
        bgColor: '#274156'
      }
    );
    });
    this.showLoader();
  }
}
</script>

<style>
  @import '../../bower_components/fakeLoader/fakeLoader.css';

  #fakeLoader {
    z-index: 999999 !important;
  }
</style>

我正在设置一个名为show的布尔值，并且每当调用jQuery函数时将其设为false，并使其永久为false，因此该组件将不再显示为当前会话。因此，如果用户打开另一个选项卡，则fakeloader应该在开头再次出现。

Answer 1

您可能需要查看v-cloak。它允许您根据是否加载vue来分割站点的区域。

对于您的示例，我有一个由

组成的CSS表

#app[v-cloak] {
    display: none
}

#fakeloader {
    display: none
}

#fakeloader[v-cloak] {
    display: block
}

然后

<div id="app">
  <div id="fakeloader" v-cloak>
    This is my loader
  </div>
  <div id="content" v-cloak>
    This is my page
  </div>
</div>

这将使您的应用在加载vue时具有首选项，并且加载vue时加载器具有首选项。

编辑：只是为了说明为什么在你回答之前小提琴是一件好事。我有fiddle up here应该演示并修复代码。

仅显示一次组件而不再显示VUEJS（当前会话）

1 个答案: