,可以通过以下步骤实现:
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;
}
}
这样,当点击打开对话框的按钮时,对应的对话框会显示出来,点击关闭按钮时,对话框会隐藏起来。每个对话框可以具有不同的内容,通过在data属性中定义的dialogs数组中设置不同的content属性即可。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云