使用van-dropdown-item做一个筛选
时间: 2023-08-04 15:07:05 浏览: 143
DropDownMenu筛选器
好的,下面是一个简单的例子:
```html
<template>
<div>
<van-dropdown-menu>
<van-dropdown-item v-model="selected" :options="options" />
</van-dropdown-menu>
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ text: '选项一', value: '1' },
{ text: '选项二', value: '2' },
{ text: '选项三', value: '3' },
],
};
},
};
</script>
```
这个例子中,我们使用了 `van-dropdown-menu` 和 `van-dropdown-item` 组件来实现筛选功能。其中,`van-dropdown-item` 组件通过 `:options` 属性传入选项列表,通过 `v-model` 实现双向绑定。当用户选择某个选项时,`selected` 变量会自动更新。你可以根据 `selected` 的值来进行筛选操作。
阅读全文