用vue3+elementplus写个下拉框城市选择
时间: 2023-09-21 15:06:54 浏览: 98
好的,下面是用 Vue3 和 Element Plus 写的城市选择下拉框代码:
```html
<template>
<div>
<el-select v-model="selectedCity" placeholder="请选择城市">
<el-option
v-for="city in cityList"
:key="city.value"
:label="city.label"
:value="city.value"
></el-option>
</el-select>
</div>
</template>
<script>
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
export default {
components: {
ElSelect,
ElOption,
},
setup() {
const selectedCity = ref('');
const cityList = [
{ label: '北京', value: 'beijing' },
{ label: '上海', value: 'shanghai' },
{ label: '深圳', value: 'shenzhen' },
{ label: '广州', value: 'guangzhou' },
{ label: '杭州', value: 'hangzhou' },
];
return {
selectedCity,
cityList,
};
},
};
</script>
```
希望对你有帮助!请问还有其他问题吗?
阅读全文