uview Dropdown 怎么获取选中的值
时间: 2023-10-07 12:13:25 浏览: 155
获取select的值
uView Dropdown 组件的选中值可以通过 `v-model` 或者 `@change` 事件来获取。
1. 通过 `v-model` 获取选中值
在 uView Dropdown 组件上使用 `v-model`,可以方便地获取选中的值。
```vue
<template>
<u-dropdown v-model="selectedValue">
<u-dropdown-item value="1">选项1</u-dropdown-item>
<u-dropdown-item value="2">选项2</u-dropdown-item>
<u-dropdown-item value="3">选项3</u-dropdown-item>
</u-dropdown>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
}
}
}
</script>
```
上述代码中,`selectedValue` 即为选中的值,可以在组件内直接使用。
2. 通过 `@change` 事件获取选中值
在 uView Dropdown 组件上使用 `@change`,可以在回调函数中获取选中的值。
```vue
<template>
<u-dropdown @change="handleChange">
<u-dropdown-item value="1">选项1</u-dropdown-item>
<u-dropdown-item value="2">选项2</u-dropdown-item>
<u-dropdown-item value="3">选项3</u-dropdown-item>
</u-dropdown>
</template>
<script>
export default {
methods: {
handleChange(value) {
console.log('选中的值为:', value);
}
}
}
</script>
```
上述代码中,`handleChange` 函数的参数 `value` 即为选中的值。可以在回调函数中根据需要进行处理。
阅读全文