vue의 다양한 조건에서 다양한 팝업 창 기능을 제어하는 ​​방법

<template>
  <div>
    <button @click="showModal = true">弹出模态框</button>
    <div v-if="showModal" class="modal">
      <!-- Modal内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<template>
  <div>
    <!-- 显示第一个弹窗的按钮 -->
    <button @click="showModal1 = true">显示第一个弹窗</button>
    <!-- 显示第二个弹窗的按钮 -->
    <button @click="showModal2 = true">显示第二个弹窗</button>

    <!-- 第一个弹窗的HTML结构 -->
    <div v-if="showModal1" class="modal">
      <!-- Modal内容 -->
      <button @click="closeModal1">关闭</button>
    </div>

    <!-- 第二个弹窗的HTML结构 -->
    <div v-if="showModal2" class="modal">
      <!-- Modal内容 -->
      <button @click="closeModal2">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal1: false,
      showModal2: false
    };
  },
  computed: {
    //计算属性showModal可以根据条件控制不同的弹窗
    showModal() {
      if (this.showModal1) {
        return this.showModal1;
      } else if (this.showModal2) {
        return this.showModal2;
      } else {
        return false;
      }
    }
  },
  methods: {
    closeModal1() {
      //关闭第一个弹窗
      this.showModal1 = false;
    },
    closeModal2() {
      //关闭第二个弹窗
      this.showModal2 = false;
    }
  }
};
</script>