当前位置：首页 > VUE

vue实现天气

2026-02-10 00:52:27VUE

使用Vue实现天气功能

在Vue中实现天气功能通常需要调用天气API获取数据，并将数据展示在页面上。以下是实现步骤：

注册天气API

选择一个天气API服务并注册获取API密钥。常用的天气API有：

vue实现天气

OpenWeatherMap
和风天气
高德地图天气API
百度地图天气API

安装axios

在Vue项目中安装axios用于发送HTTP请求：

vue实现天气

npm install axios

创建天气组件

<template>
  <div class="weather-container">
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else class="weather-info">
      <h3>{{ weatherData.city }}</h3>
      <p>温度: {{ weatherData.temp }}°C</p>
      <p>天气: {{ weatherData.condition }}</p>
      <p>湿度: {{ weatherData.humidity }}%</p>
      <p>风速: {{ weatherData.windSpeed }} km/h</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      weatherData: {},
      loading: false,
      error: null
    };
  },
  mounted() {
    this.fetchWeatherData();
  },
  methods: {
    async fetchWeatherData() {
      this.loading = true;
      this.error = null;

      try {
        const API_KEY = 'YOUR_API_KEY';
        const CITY = 'Beijing';
        const response = await axios.get(
          `https://api.openweathermap.org/data/2.5/weather?q=${CITY}&appid=${API_KEY}&units=metric`
        );

        this.weatherData = {
          city: response.data.name,
          temp: Math.round(response.data.main.temp),
          condition: response.data.weather[0].main,
          humidity: response.data.main.humidity,
          windSpeed: response.data.wind.speed
        };
      } catch (err) {
        this.error = '获取天气数据失败';
        console.error(err);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style>
.weather-container {
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
  max-width: 300px;
  margin: 0 auto;
}
.weather-info {
  text-align: center;
}
</style>

添加搜索功能

允许用户搜索不同城市的天气：

<template>
  <div>
    <input v-model="city" placeholder="输入城市名" />
    <button @click="fetchWeatherData">搜索</button>
    <!-- 天气展示部分同上 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: 'Beijing'
    };
  },
  methods: {
    async fetchWeatherData() {
      // 使用this.city作为查询参数
    }
  }
};
</script>

添加天气图标

根据天气状况显示相应图标：

<template>
  <div>
    <img :src="getWeatherIcon(weatherData.condition)" alt="天气图标" />
  </div>
</template>

<script>
export default {
  methods: {
    getWeatherIcon(condition) {
      const icons = {
        'Clear': 'sun.png',
        'Clouds': 'cloud.png',
        'Rain': 'rain.png',
        'Snow': 'snow.png'
      };
      return icons[condition] || 'default.png';
    }
  }
};
</script>