this.$http.get('/static/city.json').then(response => {/* 要进行的数据处理 */}）   // '/static/city.json'自己要引入的文件或接口。

 getFirstLetter: function (str) { //  得到城市第一个字的首字母return pinyin(str)[0][0].charAt(0).toUpperCase()},

 buildLetter: function () {  // 构建字母项letter = []for (let i = 0; i < 26; i++) {let obj = {}obj.letter = String.fromCharCode((65 + i))obj.citylist = []letter.push(obj)}},

  buildItem: function (cityNamesFilter) {  // 构建城市this.buildLetter()let _this = thisfor (let i = 0; i < 26; i++) {letter[i].citylist = []}for (let i = 0; i < cityNamesFilter.length; i++) {let _index = Number(_this.getFirstLetter(cityNamesFilter[i]).charCodeAt() - 65)if (_index >= 0 && _index < 26) {letter[_index].citylist.push(cityNamesFilter[i])}}// 如果letter中citylist中没有值的话，过滤这一项showCity = showCityTemp = letter.filter(function (value) {let len = value.citylist.lengthreturn len > 0})},

<template><div id="city"><header-item message="城市列表" backUrl="/"></header-item><div class="search-city"><input type="text" placeholder="请输入要搜索的城市" v-model="citySearch" :value="citySearch"></div><div><div id="showCityContent"></div><div v-for="item in showCity" class="letter-item"><div><a :id="item.letter">{{item.letter}}</a></div><div v-for="i in item.citylist">{{i}} </div></div></div><aside class="letter-aside"><ul><li v-for="item in showCity" @click="naver(item.letter)">{{item.letter}} </li></ul></aside><div id="tip">{{tipString}}</div></div>
</template>

  naver: function (id) { // 点击右边字母滚动this.tipString = idlet obj = document.getElementById(id)let tip = document.getElementById('tip')tip.setAttribute('class', 'tipAppear')setTimeout(function () {tip.removeAttribute('class')}, 500)let oPos = obj.offsetTopreturn window.scrollTo(0, oPos - 36)},

watch: {citySearch: function (newCitySearch) {  //citySearch是input中输入的值this.cityFilter(newCitySearch)}

   cityFilter: function (city) {  // 城市搜索筛选
        let showCityListTempthis.buildItem(cityNamesFilter)showCity = showCityTempshowCity = showCity.filter(function (value) {showCityList = value.citylistshowCityListTemp = showCityList.filter(function (val) {return (val.indexOf(city) > -1)})value.citylist = showCityListTempreturn value.citylist.length > 0})this.showCity = showCityif (showCity.length === 0) {let _showCityContent = document.getElementById('showCityContent')_showCityContent.innerText = '查询不到结果'_showCityContent.setAttribute('class', 'tipShow')} else {document.getElementById('showCityContent').innerText = ''}}