vue从外部链接获取天气预报数据

可以使用 axios 库发送 GET 请求获取天气预报数据，然后在 Vue 组件中使用该数据进行渲染。以下是一个简单的示例代码：

<template>
  <div>
    <h1>{{ city }}天气预报</h1>
    <p>温度：{{ temperature }}℃</p>
    <p>天气状况：{{ condition }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      city: '',
      temperature: '',
      condition: '',
    };
  },
  mounted() {
    axios.get('https://api.weather.com/forecast/weatherdata')
      .then(response => {
        this.city = response.data.city;
        this.temperature = response.data.temperature;
        this.condition = response.data.condition;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

在上面的代码中，我们使用 axios 库发送 GET 请求获取天气预报数据，并在组件的 mounted 钩子函数中将数据赋值给组件的 data 属性。然后在模板中使用插值语法将数据渲染到页面上。