一键掌握天气动态 - 基于Vue和高德API的实时天气查询

<template>
  <div>
    <input v-model="city" placeholder="请输入城市名称">
    <button @click="getWeather">查询天气</button>
    <div v-if="weatherInfo">
      <p>城市：{{ weatherInfo.city }}</p>
      <p>气温：{{ weatherInfo.tem }} ℃</p>
      <p>天气：{{ weatherInfo.wea }}</p>
      <p>风速：{{ weatherInfo.win }}</p>
      <p>湿度：{{ weatherInfo.humidity }}</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      city: '',
      weatherInfo: null
    };
  },
  methods: {
    getWeather() {
      if (!this.city) {
        alert('请输入城市名称');
        return;
      }
      const key = '您的高德API key'; // 替换为您的高德API key
      const url = `https://restapi.amap.com/v3/weather/weatherInfo?city=${encodeURIComponent(this.city)}&key=${key}`;
 
      fetch(url)
        .then(response => response.json())
        .then(data => {
          if (data.status === '1') {
            this.weatherInfo = {
              city: data.city,
              tem: data.lives[0].temperature,
              wea: data.lives[0].weather,
              win: data.lives[0].winddirection + data.lives[0].windpower,
              humidity: data.lives[0].humidity
            };
          } else {
            alert('查询失败，请检查城市名称是否正确');
          }
        })
        .catch(error => alert('请求发生错误：', error));
    }
  }
};
</script>

这段代码使用了Vue框架和高德API来实现了一个简单的天气查询功能。用户可以通过输入城市名称来查询天气信息，包括温度、天气状况、风速和湿度等。代码中使用了fetch API来进行HTTP请求，并处理了响应的JSON数据。在实际应用中，你需要替换url中的您的高德API key为你自己的高德API key，以便正常使用该服务。