以下是一个简单的基于Vue3的后台菜单管理代码示例：
```
<template>
<div>
<h1>菜单管理</h1>
<div>
<button @click="addMenu">添加菜单</button>
<button @click="deleteMenu">删除菜单</button>
</div>
<t
able>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>链接</th>
</tr>
</thead>
<tbody>
<tr v-for="menu in menus" :key="menu.id">
<td>{{ menu.id }}</td>
<td>{{ menu.name }}</td>
<td>{{ menu.link }}</td>
</tr>
</tbody>
</t
able>
<div v-if="selectedMenu">
<h2>编辑菜单</h2>
<form>
<l
abel for="name">名称:</l
abel>
<input type="text" id="name" v-model="selectedMenu.name">
<l
abel for="link">链接:</l
abel>
<input type="text" id="link" v-model="selectedMenu.link">
</form>
<button @click="saveMenu">保存</button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const menus = ref([
{ id: 1, name: '首页', link: '/' },
{ id: 2, name: '产品', link: '/products' },
{ id: 3, name: '关于我们', link: '/
about' },
]);
const selectedMenu = ref(null);
function addMenu() {
const newMenu = { id: menus.value.length + 1, name: '', link: '' };
menus.value.push(newMenu);
selectedMenu.value = newMenu;
}
function deleteMenu() {
if (selectedMenu.value) {
const index = menus.value.indexOf(selectedMenu.value);
menus.value.splice(index, 1);
selectedMenu.value = null;
}
}
function saveMenu() {
selectedMenu.value = null;
}
return {
menus,
selectedMenu,
addMenu,
deleteMenu,
saveMenu,
};
},
};
</script>
```
此示例中，我们使用了Vue3的Composition API来定义了一个基本的菜单管理组件。该组件包括一个菜单列表，添加和删除菜单的按钮，以及一个表单来编辑和保存选定的菜单。
我们使用`ref`来创建响应式的`menus`和`selectedMenu`数据，并在`setup`函数中定义了`addMenu`、`deleteMenu`和`saveMenu`方法，分别用于添加、删除和保存菜单。
在模板中，我们使用`v-for`指令来循环渲染菜单列表，使用`v-if`指令来控制表单的显示和隐藏。我们还使用`v-model`指令将表单元素与选定的菜单对象进行绑定，以使用户能够编辑菜单数据。
当用户单击添加菜单按钮时，我们创建一个新的菜单对象并将其添加到`menus`数组中，并将其设置为选定的菜单，以便用户可以编辑它。当用户单击删除菜单按钮时，我们从`menus`数组中删除选定的菜单，并将选定的菜单重置为`null`。当用户单击保存按钮时，我们将选定的菜单重置为`null`，以使表单隐藏。
这只是一个简单的示例，你可以根据自己的需求对其进行修改和扩展。
7887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
