在vue.js中显示具有不同内容的多个v对话框

data() {
  return {
    dialogs: [
      { id: 1, content: '对话框1的内容', visible: false },
      { id: 2, content: '对话框2的内容', visible: false },
      { id: 3, content: '对话框3的内容', visible: false }
    ]
  };
}

<template>
  <div>
    <button @click="openDialog(1)">打开对话框1</button>
    <button @click="openDialog(2)">打开对话框2</button>
    <button @click="openDialog(3)">打开对话框3</button>

    <div v-for="dialog in dialogs" :key="dialog.id" v-if="dialog.visible">
      <h2>对话框 {{ dialog.id }}</h2>
      <p>{{ dialog.content }}</p>
      <button @click="closeDialog(dialog.id)">关闭对话框</button>
    </div>
  </div>
</template>

methods: {
  openDialog(id) {
    this.dialogs.find(dialog => dialog.id === id).visible = true;
  },
  closeDialog(id) {
    this.dialogs.find(dialog => dialog.id === id).visible = false;
  }
}