,可以通过使用v-model和v-if指令来实现。
首先,确保你已经安装了Vuetify,并在你的Vue项目中引入了Vuetify库。
接下来,你可以使用v-for指令来循环遍历你的列表项,并为每个列表项添加一个菜单按钮。例如:
<template>
<div>
<v-btn v-for="(item, index) in items" :key="index" @click="toggleMenu(index)">
{{ item.name }}
</v-btn>
<v-menu v-model="menuOpen" :close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-btn v-on="on">菜单</v-btn>
</template>
<v-list>
<v-list-item v-for="(subItem, subIndex) in items[index].subItems" :key="subIndex">
<v-list-item-title>{{ subItem }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
name: '列表项1',
subItems: ['子项1', '子项2', '子项3']
},
{
name: '列表项2',
subItems: ['子项4', '子项5', '子项6']
},
// 其他列表项...
],
menuOpen: []
};
},
methods: {
toggleMenu(index) {
this.$set(this.menuOpen, index, !this.menuOpen[index]);
}
}
};
</script>
在上面的代码中,我们使用v-for指令循环遍历items数组,并为每个列表项添加一个按钮。当点击按钮时,调用toggleMenu方法来切换menuOpen数组中对应索引位置的值,从而打开或关闭菜单。
在v-menu组件中,我们使用v-model指令将menuOpen数组中的值绑定到菜单的打开状态。通过设置close-on-content-click为false,可以在点击菜单内容时不关闭菜单。
在v-list中,我们使用v-for指令循环遍历当前列表项的子项,并将其显示在菜单中。
这样,当你点击列表项的按钮时,对应的菜单将会打开或关闭,显示或隐藏子项。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云