el-dropdown下拉菜单绑定值的完整写法
时间: 2023-12-01 07:04:57 浏览: 61
要绑定 el-dropdown 下拉菜单的值,可以通过 v-model 指令来实现。下面是完整的代码示例:
```
<template>
<el-dropdown v-model="selectedValue">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item value="value1">菜单项1</el-dropdown-item>
<el-dropdown-item value="value2">菜单项2</el-dropdown-item>
<el-dropdown-item value="value3">菜单项3</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
}
}
}
</script>
```
在上述代码中,我们通过 v-model 指令将 el-dropdown 的值与 selectedValue 变量进行了双向绑定。同时,每个 el-dropdown-item 都设置了 value 属性,表示该菜单项的值。
当用户选择某个菜单项时,selectedValue 变量就会自动更新为该菜单项的 value 值。可以通过在组件中访问 selectedValue 变量来获取用户所选的菜单项的值,从而进行后续的操作。