后端返回的数据

我们要得效果

<template><view><view v-for="(value,key) in cities" :key="key"><view style="color: red;"> {{ key }} </view><view style="border: 1rpx solid black;"><text v-for="item in value" style="margin-right: 15rpx;"> {{ item }} </text></view></view></view>
</template><script>import { citysApi } from '@/api/city.api.js'export default {data() {return {cities: {}}},methods: {},async onLoad() {const res = await citysApi()let obj = {}for(let i = 65; i <= 90; i++) {let key = String.fromCharCode(i)obj[key] = []}res.data.forEach(item => {let key = item.city_pre.toLocaleUpperCase()obj[key].push(item.city_name)})// 把长度为0的项，删除掉Object.keys(obj).forEach(key => {if(obj[key].length === 0)  delete obj[key]})this.cities = obj}}
</script><style></style>