Vue实现选择城市功能

Vue实现选择城市功能可以分为以下步骤：

1. 引入第三方城市数据

为了实现城市选择功能，我们需要先引入第三方城市数据，这里可以选择 city.json 这个json文件，里面包含了全国各个城市的数据。

2. 安装并引入element-ui组件库

Vue框架本身并不提供选择框组件，所以我们需要借助第三方的UI组件库。这里我们选择element-ui组件库，并在项目中安装和引入。

3. 在Vue页面中引用城市数据

我们可以在Vue实例的 data 中通过 require 引入我们下载好的城市文件 city.json 来获取城市数据，代码示例如下：

export default {
  data() {
    cities: require('./assets/city.json')
  }
}

4. 使用element-ui组件完成选择框功能

在Vue页面中，我们可以使用element-ui提供的 el-select 组件来实现选择框的功能，并通过 v-for 指令指定需要遍历的城市数据。代码示例如下：

<template>
  <el-select v-model="selectedCity" placeholder="请选择">
    <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    cities: require('./assets/city.json'),
    selectedCity: null
  }
}
</script>

在上面的代码中，我们通过 v-model 绑定选择框的值到 selectedCity 变量上，并通过 el-option 元素遍历城市数据。为了方便我们获取到选中的城市数据，我们在 el-option 元素上使用 city.id 作为选项的值。

5. 获取选中的城市数据

我们可以在 methods 中定义一个方法来获取所选城市的数据，这里我们使用 find() 方法遍历城市数据中的城市，并通过城市的 id 属性找到我们所选的城市数据。代码示例如下：

<template>
  <el-select v-model="selectedCity" placeholder="请选择" @change="handleCityChange">
    <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    cities: require('./assets/city.json'),
    selectedCity: null
  },

  methods: {
    handleCityChange() {
      const selectedCityData = this.cities.find(city => city.id === this.selectedCity)
      console.log(selectedCityData)
    }
  }
}
</script>

到这里，我们就完成了Vue实现选择城市功能的完整攻略。

下面再给出一个实现城市级联选择框的示例：

<template>
  <div class="city-select-wrapper">
    <el-cascader
      :options="cityData"
      :props="{value: 'value', label: 'label', children: 'children'}"
      v-model="selectedCity"
      change-on-select
      @change="handleCityChange">
    </el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityData: require('./assets/city-data.json'),
      selectedCity: []
    }
  },

  methods: {
    handleCityChange(selectedValues) {
      console.log(selectedValues)
    }
  }
}
</script>

在上面的示例中，我们使用了element-ui提供的 el-cascader 组件来实现城市级联选择框。数据格式需要满足下面这个结构：

[
  {
    value: '福建省',
    label: '福建省',
    children: [
      {
        value: '福州市',
        label: '福州市',
        children: [
          { value: '鼓楼区', label: '鼓楼区' },
          { value: '台江区', label: '台江区' },
          ...
        ]
      },
      ...
    ]
  },
  ...
]

如果数据结构不同，需要在 props 属性中指定数据的 value、label、children 等属性的名称，并在 change-on-select 属性中指定级联选择时是否立即显示选择结果。