vue项目学习：13-city的ajax和数据传递

这里和首页的数据差不多，不多写了。代码如下：

获取数据：

import axios from 'axios'

data () {
    return {
      hotCities: [],
      cities: {}
    }
  },
  methods: {
    getCityInfo () {
      axios.get('/api/city.json')
        .then(this.getCityInfoSucc)
    },
    getCityInfoSucc (res) {
      console.log(res)
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.hotCities = data.hotCities
        this.cities = data.cities
        console.log(this.hotCities)
        console.log(this.cities)
      }
    }
  },
  mounted () {
    this.getCityInfo()
  }

传递数据：

<city-list :hot="hotCities" :city="cities"></city-list>
    <alphabet :city="cities"></alphabet>

接受数据

props: {
    hot: Array,
    city: Object
  },

渲染数据

 <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" v-for="item of hot" :key="item.id">
            <div class="button">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="area" v-for="(item, key) of city" :key="key">
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list">
          <div class="item border-bottom" v-for="cityItem of item" :key="cityItem.id">{{cityItem.name}}</div>
        </div>
      </div>

结束。