vue天气预报

assets引入天气图片，用于图片代码拼接展示到页面上

 <div class="newsflash-title">天气预报</div>
      <div style="margin-bottom:50px">
        <span>切换城市：</span>
        <el-cascader
          placeholder="试试搜索：北京"
          :options="city"
          @change="handleCascaderChange"
          v-model="selectedValues"
          :props="{ checkStrictly: true,expandTrigger: 'hover'  }"
          filterable
          :show-all-levels="false"></el-cascader>
        <div v-if="weather" style="font-size: 40px;font-weight: bold;margin-top: 20px">{{weather.city}}</div>

        <div class="weather">
          <img style="width: 85px;height: 85px;" :src="require(`../assets/weather/${todaySWeather.dayweather}.png`)"/>
          <div class="weathertext">{{todaySWeather.dayweather}}</div>
          <div class="temperature" v-if="todaySWeather.daytemp">{{todaySWeather.nighttemp}}~{{todaySWeather.daytemp}}&#8451</div>
        </div>
        <div class="updateTime">更新时间：{{weather.reporttime}}</div>
        <div  class="_3Days">未来3天</div>
        <div class="future">
          <div v-for="(item,index) in casts" :key="index" >
            <div class="list-status">星期{{item.week | weekChinese}}</div>
            <div class="list-status">{{item.date | dayTime}}</div>
            <img  style="width: 45px;height: 45px;margin: 10px auto;" :src="require(`../assets/weather/${item.dayweather}.png`)"/>
            <div class="list-status">{{item.dayweather}}</div>
            <div class="list-temp">{{item.nighttemp}}~{{item.daytemp}}&#8451</div>
          </div>
        </div>
      </div>

.weather{
  margin: 20px 0;
  font-size: 45px;
  display: flex;
  color: #666;
  align-items: center;
  justify-content: start;
}
.weathertext{
  margin: 0 20px;
}
.future{
  width: 90%;
  display: flex;
  text-align: center;
  justify-content: space-between;
}
._3Days{
  margin: 20px 0;
  font-style: italic;
  font-size: 18px;
  font-weight: bold;
  color:#5f5f5f;
}
.updateTime{
  font-size: 16px;
  color: #999;
  margin-top: 10px;
}
.list-status {
  font-size: 14px;
  line-height: 19px;
  color: #222222;
}
.list-temp {
  font-size: 16px;
  font-weight: bold;
  padding-top: 8px;
}

data

引入城市文件

    weather: [],
      todaySWeather: [],//今天
      casts: [],//未来几天
      selectedValues: ["柳州"],
      city: JSON.parse(JSON.stringify(options)),

 filters:{
    filtertime(value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    },
    weekChinese(value) {
      let week = '';
      switch (value) {
        case '1':
          week = '一';
          break;
        case '2':
          week = '二';
          break;
        case '3':
          week = '三';
          break;
        case '4':
          week = '四';
          break;
        case '5':
          week = '五';
          break;
        case '6':
          week = '六';
          break;
        case '7':
          week = '日';
          break;
      }
      return week;
    },
  dayTime(value) {
      return moment(value).format('MM/DD');
    }
  },

  methods: {
    handleCascaderChange() {
      console.log(this.selectedValues)
      this.selectedValues = this.selectedValues[this.selectedValues.length - 1];
      this.$axios({
        url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.selectedValues}&key=高德地图申请的密钥&extensions=all`,
        method: 'get',
      }).then((res) => {
        const {forecasts}=res.data
        this.weather = forecasts[0]
        this.todaySWeather= forecasts[0].casts[0]
        this.casts = forecasts[0].casts.slice(1)
        console.log(this.casts,'weather')
      });
    },}