vue 实时天气和时间

要实现实时天气和时间的功能，你可以考虑以下步骤：

1. 获取当前的时间和日期。可以使用 JavaScript 的内置 Date 对象来获取当前时间和日期，例如 `const now = new Date()`。

2. 获取实时天气数据。你可以使用第三方天气 API，如和风天气 API、心知天气 API 等，发送 HTTP 请求获取天气数据。

3. 在 Vue 组件中创建 data 属性来存储时间和天气数据。

4. 在 mounted 钩子函数中设置定时器，每隔一定时间更新时间和天气数据。

5. 在 Vue 模板中使用插值语法来显示时间和天气数据。

以下是一个简单的示例代码：

<template>
  <div>
    <p>当前时间：{{ currentTime }}</p>
    <p>当前天气：{{ currentWeather }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      currentTime: '',
      currentWeather: ''
    }
  },
  mounted() {
    this.getCurrentTime()
    this.getCurrentWeather()
    setInterval(() => {
      this.getCurrentTime()
      this.getCurrentWeather()
    }, 10000)
  },
  methods: {
    getCurrentTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString()
    },
    async getCurrentWeather() {
      const response = await axios.get('https://api.heweather.net/s6/weather/now', {
        params: {
          location: '北京',
          key: 'your_api_key'
        }
      })
      this.currentWeather = response.data.HeWeather6[0].now.cond_txt
    }
  }
}
</script>

注意要替换 API key 和请求地址为你自己的。