如何结合天气数据将开尔文温度转换为摄氏度？

针对你提供的Vue代码场景，有两种实用的处理方案，直接上实操内容：

方式一：让API直接返回摄氏度（最省心） #

OpenWeatherMap支持通过请求参数指定温度单位，无需自行转换。只需在请求URL中追加&units=metric参数，API就会直接返回摄氏度格式的数据：

export default {
  name: 'App',
  data () {
    return {
      api_key: '==REDACTED==',
      // 追加units=metric参数，指定返回摄氏度
      url_base: `https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=${this.api_key}&units=metric`,
      query: '',
      weather: {}
    }
  },
  // 示例请求方法
  methods: {
    async fetchWeather() {
      try {
        const res = await fetch(this.url_base);
        const data = await res.json();
        this.weather = data;
        // 此时data.main.temp直接是摄氏度数值
      } catch(err) {
        console.error(err);
      }
    }
  }
}

方式二：手动转换已获取的开尔文温度 #

如果已经拿到开尔文格式的返回数据，可通过以下两种方式处理：

1. 使用Vue计算属性（推荐，自动响应数据变化） #

在组件中添加计算属性，实时转换温度并避免报错：

export default {
  name: 'App',
  data () {
    return {
      api_key: '==REDACTED==',
      url_base: `https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=${this.api_key}`,
      query: '',
      weather: {}
    }
  },
  computed: {
    celsiusTemp() {
      // 先判断数据是否加载完成，避免初始化报错
      if (!this.weather?.main) return '';
      // 开尔文转摄氏度公式：K - 273.15，toFixed(1)保留1位小数，可按需调整
      return (this.weather.main.temp - 273.15).toFixed(1);
    }
  },
  methods: {
    async fetchWeather() {
      try {
        const res = await fetch(this.url_base);
        const data = await res.json();
        this.weather = data;
      } catch(err) {
        console.error(err);
      }
    }
  }
}

之后在模板中直接用{{ celsiusTemp }}即可显示转换后的温度。

2. 请求数据后直接转换存储 #

在获取API返回数据时，直接将温度转换后存入data变量：

export default {
  name: 'App',
  data () {
    return {
      api_key: '==REDACTED==',
      url_base: `https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=${this.api_key}`,
      query: '',
      weather: {},
      celsiusTemp: ''
    }
  },
  methods: {
    async fetchWeather() {
      try {
        const res = await fetch(this.url_base);
        const data = await res.json();
        this.weather = data;
        // 转换后存入变量
        this.celsiusTemp = (data.main.temp - 273.15).toFixed(1);
      } catch(err) {
        console.error(err);
      }
    }
  }
}

关键注意点 #

• 转换公式固定：摄氏度 = 开尔文温度 - 273.15，可根据需求调整小数位数或直接取整。
• 必须判断数据是否存在，避免组件初始化阶段因weather.main未定义引发报错。

内容的提问来源于stack exchange，提问作者User