vue3移动端项目中,请帮我实现一排下拉选择框,第一个是综合排序,选项有综合排序、最新上架、价格最低、距离最近,第二个是品牌,选项有大众、本田、宝马、丰田、奔驰,第三个是价格,选项有5万以下、5-10万、10-15万、15万以上,第四个是车龄,选项有2、4、6、8、10、不限,第五个是里程,选项有3、6、9、不限
时间: 2023-07-04 15:22:08 浏览: 85
好的,可以使用Element-Plus组件库提供的下拉选择框(el-select)来实现。下面是示例代码:
```
<template>
<div>
<el-select v-model="sort" placeholder="综合排序">
<el-option label="综合排序" value="default"></el-option>
<el-option label="最新上架" value="new"></el-option>
<el-option label="价格最低" value="price"></el-option>
<el-option label="距离最近" value="distance"></el-option>
</el-select>
<el-select v-model="brand" placeholder="品牌">
<el-option label="大众" value="volkswagen"></el-option>
<el-option label="本田" value="honda"></el-option>
<el-option label="宝马" value="bmw"></el-option>
<el-option label="丰田" value="toyota"></el-option>
<el-option label="奔驰" value="benz"></el-option>
</el-select>
<el-select v-model="price" placeholder="价格">
<el-option label="5万以下" value="<50000"></el-option>
<el-option label="5-10万" value="50000-100000"></el-option>
<el-option label="10-15万" value="100000-150000"></el-option>
<el-option label="15万以上" value=">150000"></el-option>
</el-select>
<el-select v-model="age" placeholder="车龄">
<el-option label="2年以内" value="<2"></el-option>
<el-option label="2-4年" value="2-4"></el-option>
<el-option label="4-6年" value="4-6"></el-option>
<el-option label="6-8年" value="6-8"></el-option>
<el-option label="8-10年" value="8-10"></el-option>
<el-option label="不限" value="unlimited"></el-option>
</el-select>
<el-select v-model="mileage" placeholder="里程">
<el-option label="3万公里以内" value="<30000"></el-option>
<el-option label="3-6万公里" value="30000-60000"></el-option>
<el-option label="6-9万公里" value="60000-90000"></el-option>
<el-option label="不限" value="unlimited"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
sort: 'default',
brand: '',
price: '',
age: '',
mileage: ''
};
}
};
</script>
```
在上述代码中,我们使用了el-select组件,并在每一个下拉选择框中分别添加了多个选项。同时,我们还使用了v-model指令来绑定每一个下拉选择框的值。这样,当用户选择了某一个选项后,就可以通过相应的v-model变量来获取到选中的值。
阅读全文