vue天气预报

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

 
天气预报
      

        切换城市：
        
        
{{weather.city}}

        

          
          
{{todaySWeather.dayweather}}
          
{{todaySWeather.nighttemp}}~{{todaySWeather.daytemp}}℃
        
        
更新时间：{{weather.reporttime}}
        
未来3天
        

          

            
星期{{item.week | weekChinese}}
            
{{item.date | dayTime}}
            
            
{{item.dayweather}}
            
{{item.nighttemp}}~{{item.daytemp}}℃
          
        
      

.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')
      });
    },}