使用Vue制作天气预报界面

最新推荐文章于 2024-03-31 09:31:00 发布

奇奇XL

最新推荐文章于 2024-03-31 09:31:00 发布

阅读量2.6k

点赞数 4

文章标签： vue.js java javascript

本文链接：https://blog.csdn.net/qq_55299191/article/details/130161782

版权

要求：

使用Axios请求数据，在页面中显示近七天的天气情况

效果图：

进人http://ww.tianqiapi.com,注册开发账号,并获得appid与appsecret

完整代码如下：


<template>
  <div id="app">
    <nav>{{ update_time }} {{ week }}</nav>
    <div class="hello">
      <!-- 城市信息 -->
      <h2>{{ city }}</h2>
      <h4>{{ message }}</h4>
      <h2>{{ wea }}</h2>
      <h1>{{ tem }}℃</h1>
      <div class="detail">
        <span>风力{{ win_speed }}&nbsp;|&nbsp;{{ win }}&nbsp;|&nbsp;空气质量：{{ air_level }}</span>
      </div>
      <!-- 天气列表 -->
      <ul class="list">
        <li v-for="item in obj">
          <div>
            <h3>{{ item.data }}</h3>
            <h3>{{ item.week }}</h3>
            <img :src="get(item.wea_img)" alt="" />
            <h3>{{ item.wea }}</h3>
            <h3>{{ item.tem1 }}℃-{{item.tem2}}℃</h3>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script >
import axios from "axios"; //引入axios 
export default{
  name: "HelloWorld",
  data() {
    return {
      city: "",
      obj: [],
      date: "",
      week: "",
      wea:"",
      message: "",
    };
  },
  methods: {
    get(sky) {
      //图片格式
      return "https://xintai.xianguomall.com/skin/pitaya/" + sky + ".png";
    },
  },
  created() {
    this.get(); 
    var that = this;
    axios
      .get(
        "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=12345678&appsecret=abcdefgh&city=重庆"
      )//这里的id和appsecret用12345678和abcdefgh代替，替换成自己的即可
      .then(function (response) {
        //处理数据
        that.city = response.data.city;//城市
        that.obj = response.data.data;
        that.update_time = response.data.update_time;//时间
        that.week = response.data.data[0].week;
        that.wea = response.data.data[0].wea;//天气状况
        that.tem = response.data.data[0].tem;//温度
        that.win_speed = response.data.data[0].win_speed;//风力
        that.win = response.data.data[0].win;//风向
        that.air_level = response.data.data[0].air_level;//空气质量
        that.message = response.data.data[0].air_tips;
      })
      .catch(function (error) {
        console.log("请求失败");
      });
  },
}
</script>

<style scoped> 
h2{
  font-size:20px ;
} 
h2,
h4 {
    text-align: center;
}
nav{
  display: flex;
   padding: 10px;
}
.list{
  padding-top:20px ;
  max-width: 1480px;
  margin: 0 auto;
}
li {
    float: left;
    list-style-type: none;
    width: 200px;
    text-align: center;
    margin-top:20px ;
}

</style>