Question

我正在构建一个Web应用程序。我只有几个模态组件（显示有关客户，课程等的数据）。我寻找一种方法来轻松显示其中一个组件。并尽可能进行延迟加载。最好的方法是什么？

Answer 1

检出条件渲染，特别是v-if。例如，仅当单击按钮时，才会加载模态。

https://vuejs.org/v2/guide/conditional.html#v-if

单页组件：

<template>
  <div>
    <div
      v-if="showModal"
      class="modal">
      Stuff
    </div>
    <button @click="toggleModal">
      Toggle Modal
    </button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        showModal: false
      }
    },
    methods: {
      toggleModal() {
        this.showModal = !this.showModal
      }
    },
  }
</script>

VueJS中的模态组件

1 个答案: