Vue实现选择城市功能
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue实现选择城市功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
查看完整的代码请到 我的github地址
一、结果展示
二、前期准备:
1.引入汉字转拼音的插件,利用NPM安装 代码指令为 npm install pinyin --save
,详细步骤请到
2.引入vue-resource
,调用json文件,可以参考目录中的city.json,有条件的也可以自己去扒
三、 分析
所实现的功能点:
1、获取json数据展示城市列表 。
2、侧边字母定位滚动到相应的位置。
3、实现搜索城市
1、实现1的逻辑,主要是引入vue-resource,然后利用其中http的功能去调用json文件,当然api也是同样可以 。
this.$http.get('/static/city.json').then(response => {/* 要进行的数据处理 *