Vue如何實(shí)現(xiàn)選擇城市功能

這篇文章主要介紹Vue如何實(shí)現(xiàn)選擇城市功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

一、結(jié)果展示

二、前期準(zhǔn)備：

1.引入漢字轉(zhuǎn)拼音的插件，利用NPM安裝 代碼指令為 npm install pinyin --save ，詳細(xì)步驟請到pinyin

2.引入vue-resource，調(diào)用json文件，可以參考目錄中的city.json,有條件的也可以自己去扒

三、 分析

所實(shí)現(xiàn)的功能點(diǎn)：

1、獲取json數(shù)據(jù)展示城市列表 。

2、側(cè)邊字母定位滾動(dòng)到相應(yīng)的位置。

3、實(shí)現(xiàn)搜索城市

1、實(shí)現(xiàn)1的邏輯，主要是引入vue-resource，然后利用其中http的功能去調(diào)用json文件，當(dāng)然api也是同樣可以 。

this.$http.get('/static/city.json').then(response => {/* 要進(jìn)行的數(shù)據(jù)處理 */}） // '/static/city.json'自己要引入的文件或接口。

渲染列表的時(shí)候，將數(shù)據(jù)組成數(shù)組對象的形式，例如這樣

這樣的話可以一次將字母列表和城市列表一起渲染出來。不過要想把對應(yīng)的漢字都放到對應(yīng)的字母后面，我們引入了一個(gè)插件，可以用npm直接安裝 。

引入漢字轉(zhuǎn)拼音的插件，利用NPM安裝 代碼指令為 npm install pinyin --save ，詳細(xì)步驟請到pinyin

引入之后調(diào)用

 getFirstLetter: function (str) { // 得到城市第一個(gè)字的首字母
  return pinyin(str)[0][0].charAt(0).toUpperCase()
 },
 buildLetter: function () { // 構(gòu)建字母項(xiàng)
  letter = []
  for (let i = 0; i < 26; i++) {
   let obj = {}
   obj.letter = String.fromCharCode((65 + i))
   obj.citylist = []
   letter.push(obj)
  }
  },
 buildItem: function (cityNamesFilter) { // 構(gòu)建城市
  this.buildLetter()
  let _this = this
  for (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中沒有值的話，過濾這一項(xiàng)
  showCity = showCityTemp = letter.filter(function (value) {
   let len = value.citylist.length
   return 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>

從上可看出只用了showCity這個(gè)數(shù)據(jù)進(jìn)行v-for 。

2、構(gòu)建完主體以后，其實(shí)右側(cè)的字母欄與中間的字母生成方式是一致的，在定位的方面采用的是js中的scrolltop的方法，用錨點(diǎn)的方法也是可以的，有興趣的可以自己試試。

naver: function (id) { // 點(diǎn)擊右邊字母滾動(dòng)
  this.tipString = id
  let obj = document.getElementById(id)
  let tip = document.getElementById('tip')
  tip.setAttribute('class', 'tipAppear')
  setTimeout(function () {
   tip.removeAttribute('class')
  }, 500)
  let oPos = obj.offsetTop
  return window.scrollTo(0, oPos - 36)
  },

在滾動(dòng)的同時(shí)，中間也加入了字母的顯示動(dòng)畫。

這樣的話，城市列表的顯示和導(dǎo)航基本完成，接下來的重點(diǎn)在于搜索城市。

3、實(shí)現(xiàn)搜索城市

原理說起來很簡單，就是在列表中去尋找還有輸入字符的項(xiàng)，找到了就可以的讓他顯示出來。

由于vue的便利性，我們不需要去自己進(jìn)行對dom太多操作，只需要對數(shù)據(jù)進(jìn)行操作。

可以看出這一塊并沒有隱藏第一次渲染出的結(jié)構(gòu)，而是確確實(shí)實(shí)的沒有構(gòu)建，這都得益于vue對虛擬dom的操作，這里就不細(xì)說了。

 在實(shí)現(xiàn)這個(gè)功能的時(shí)候，用到了vue中watch，可以用來觀察數(shù)據(jù)的改變，當(dāng)數(shù)據(jù)改變的時(shí)候，綁定函數(shù)。

watch: {
  citySearch: function (newCitySearch) { //citySearch是input中輸入的值
  this.cityFilter(newCitySearch)
  }
 cityFilter: function (city) { // 城市搜索篩選
  let showCityListTemp
  this.buildItem(cityNamesFilter)
  showCity = showCityTemp
  showCity = showCity.filter(function (value) {
   showCityList = value.citylist
   showCityListTemp = showCityList.filter(function (val) {
   return (val.indexOf(city) > -1)
   })
   value.citylist = showCityListTemp
   return value.citylist.length > 0
  })
  this.showCity = showCity
  if (showCity.length === 0) {
   let _showCityContent = document.getElementById('showCityContent')
   _showCityContent.innerText = '查詢不到結(jié)果'
   _showCityContent.setAttribute('class', 'tipShow')
  } else {
   document.getElementById('showCityContent').innerText = ''
  }
  }

到這里，基本的的城市算是做完了。

以上是“Vue如何實(shí)現(xiàn)選擇城市功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！