VUE实现天气预报查询

vue实现天气预报查询功能

1、vue

 <div id="app">
    <div class="search">
      <input type="text" placeholder="请输入地区名称" v-model="city" @keyup.enter="searchWeather">
      <button @click="searchWeather">搜索天气</button>
      <div>
        <a @click="changeCity('北京市')">北京市</a>
        <a @click="changeCity('武汉市')">武汉市</a>
        <a @click="changeCity('杭州市')">杭州市</a>
        <a @click="changeCity('西安市')">西安市</a>
        <a @click="changeCity('福州市')">福州市</a>
        <a @click="changeCity('银川市')">银川市</a>
      </div>
    </div>
    <div class="weather" v-for="(item,index) in object.forecasts" :key="index">
<!--      当天的天气预报-->
      <div class="wea">
        <span>城市：{{item.city}}</span>
        <span>省份：{{item.province}}</span>
        <span>时间：{{item.reporttime}}</span>
      </div>
<!--      多天天气列表-->
      <div class="weather_box">
      <div class="wea_list" v-for="(wea,index) in item.casts" :key="index">
        <div class="wea_box">
          <div class="date_box">{{wea.date}}</div>
          <div class="week_box">{{wea.week}}</div>
          <div class="dayw_box">{{wea.dayweather}}</div>
          <div class="nigtw_box">{{wea.nightweather}}</div>
          <div class="temp_box">{{wea.daytemp}}~{{wea.nighttemp}}</div>
          <div class="wind_box">{{wea.daywind}}~{{wea.nightwind}}</div>
          <div class="power_box">{{wea.daypower}}~{{wea.nightpower}}</div>
          <div class="temp_box">{{wea.daytemp_float}}~{{wea.nighttemp_float}}</div>
        </div>
      </div>
    </div>
    </div>

  </div>

2、script

 data:function () {
    return{
      city: "",
      object:{
        forecasts:[]
      },
    }
  },
    methods:{
    searchWeather:function(){
      if(this.city.length == 0){
        alert("请输入城市");
        return;
      }//else{ //https://wthrcdn.etouch.cn/weather_mini?city="https://restapi.amap.com/v3/weather/weatherInfo?city=&key=<e0c48eb92615d1ab98b5ad25d3c6a044>"+this.city
        let that = this;
        this.$axios({
          url: "https://restapi.amap.com/v3/weather/weatherInfo",
          method: "GET",
          params: {
            key: "e0c48eb92615d1ab98b5ad25d3c6a044",
            city: this.city,
            extensions: 'all',
            // output: "JSON"
          },
        }).then(function(response){
              console.log("查询到的天气哪去了"+response.data)

          that.object = response.data;
          console.log(that.object);
            })
            .catch(function(error){
              alert("请求失败 " + error);
            })
    },
    changeCity:function(city){
      this.city = city;
      this.searchWeather();
    }
  }