主要介绍了vue实现城市列表选择功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

成果展示 最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍 准备工作： 　引入axios插件，调用better-scroll第三方插件，本地json文件，可以参考目录中的city.json,有条件的也可以自己去扒 功能分析 1.获取json数据展示城市列表 。 2.侧边字母定位滚动到相应的位置。 3.实现搜索城市 接下来我们开始对组件进行划分：本次案

一、缘由 在项目开发过程中，有一个需求是省市区地址选择的功能，一开始想的是直接使用静态地址资源库本地打包，但这种方式不方便维护，于是放弃。后来又想直接让后台返回全部地址数据，然后使用级联选择器进行选择，但发现数据传输量有点大且处理过程耗时，于是又摒弃了这种方法。最后还是决定采用异步的方式进行省市区地址选择，即先查询省份列表，然后根据选择的省份code查询城市列表，最后根据选择的城市列表获取区/县列表，最终根据应用场景不同，给出了两种实现方案。 其中后台总共需要提供4个接口，一个查询所有省份的接口

查看完整的代码请到   我的github地址  https://github.com/qianyinghuanmie/vue2.0-demos 一、结果展示 二、前期准备： 1.引入汉字转拼音的插件，利用NPM安装 代码指令为 npm install pinyin --save ，详细步骤请到pinyin 2.引入vue-resource，调用json文件，可以参考目录中的city.json,有条件的也可以自己去扒 三、 分析 所实现的功能点： 1、获取json数据展示城市列表 。 2、侧边字