VueJS 中的模态组件答案

【问题标题】：Modal component in VueJSVueJS 中的模态组件
【发布时间】：2019-05-09 09:23:36
【问题描述】：

我正在构建一个网络应用程序。我很少有模态组件（显示有关客户、课程等的数据）。我搜索了一种轻松显示其中一个组件的方法。如果可能的话做延迟加载。执行此操作的最佳方法是什么？

【问题讨论】：

如果您不具体说明到目前为止您已经尝试过什么以及想要完成什么，没有人能真正帮助您。 “轻松”显示组件是什么意思？你现在怎么做有什么不容易的？你现在如何打开一个模态？想象一下，你面前没有你的代码，看到一个像你这样的问题..你会怎么回答？

标签： vue.js vuejs2 vue-component

【解决方案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>

【讨论】：