Vue+axios 获取天气数据

源代码：

<body>
       <div id=”app”>
           <div class=”hello”>
               <h2>{{city}}</h2>
               <h4>今天:{{date}} {{week}}</h4>
               <h4>{{message}}</h4>
               <ul>
                   <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>
                       </div>
                   </li>
               </ul>
           </div>
       </div>
       <script src=”../../../js/axios.js”></script>
       <script src=”../../../js/vue.global.js”></script>
       <script>
           const vm = Vue.createApp({
               name: ‘HelloWorld’,
               data() {
                   return {
                       city: “”,
                       obj: [],
                       date: “”,
                       week: “”,
                       message: “”
                   }
               },
               methods: {
                   //定义get方法，拼接图片的路径
                   get(sky) {
                       return “https://xintai.xianguomall.com/skin/pitaya/” + sky + “.png”
                   }
               },
               created() {
                   this.get(); //页面开始加载时调用get方法
                   var that = this;
                   axios.get(

//这里是一个天气网站的api 实况天气接口API开发指南未来一天天气预报api – 天气API

//点击用户登录，注册一个用户，然后可以获得id和秘钥

//我这里随便打了一个appid,appsecret
                           “https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=123456&appsecret=abcdefg&city=广州”)
                       .then(function(response) {
                           //处理数据
                           that.city = response.data.city;
                           that.obj = response.data.data;
                           that.date = response.data.data[0].date;
                           that.week = response.data.data[0].week;
                           that.message = response.data.data[0].air_tips;
                       })
                       .catch(function(error) {
                           console.log(error)
                       })
               }
           }).mount(“#app”);
       </script>
       <style scoped>
           h2,
           h4 {
               text-align: center;
           }

           li {
               float: left;
               list-style-type: none;
               width: 200px;
               text-align: center;
               border: 1px solid red;
           }
       </style>
       </div>
   </body>

最后效果是这样的

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/87272.html

Vue+axios 获取天气数据

相关推荐