vue菜单栏怎么实现互斥效果
时间: 2024-01-30 09:04:09 浏览: 34
在Vue中实现菜单栏的互斥效果可以使用v-model来实现,具体实现步骤如下:
1. 在每个菜单项中设置一个唯一的标识符id。
2. 在菜单项的父组件中定义一个data属性,用来记录当前选中项的id。
3. 在每个菜单项中绑定v-model,将当前菜单项的id与选中项的id绑定。
4. 在选中项id的setter函数中,判断当前选中项的id是否与之前选中项的id相同,如果不同则取消之前选中项的选中状态,将当前选中项设置为选中状态。
下面是示例代码:
```html
<template>
<div>
<div v-for="item in menuList" :key="item.id">
<input type="radio" :id="'menu_'+item.id" :value="item.id" v-model="selectedId"/>
<label :for="'menu_'+item.id">{{ item.name }}</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{ id: 1, name: '菜单项1' },
{ id: 2, name: '菜单项2' },
{ id: 3, name: '菜单项3' },
],
selectedId: null
}
},
watch: {
selectedId(newVal, oldVal) {
if (newVal !== oldVal) {
// 取消之前选中项的选中状态
const oldSelected = document.querySelector(`#menu_${oldVal}`);
oldSelected.checked = false;
// 设置当前选中项为选中状态
const newSelected = document.querySelector(`#menu_${newVal}`);
newSelected.checked = true;
}
}
}
}
</script>
```
在上面的代码中,我们通过v-model将菜单项的id与选中项的id进行了绑定,然后在watch中监听选中项的id的变化,根据变化来取消之前选中项的选中状态,将当前选中项设置为选中状态。这样就可以实现菜单栏的互斥效果了。