【Vue自學筆記（四）】天氣案例
阿新 • • 發佈：2020-12-24
請求地址:http://wthrcdn.etouch.cn/weather_mini
請求方法:get
請求引數:city (查詢的城市名)
響應內容:天氣資訊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官網提供的axios庫線上地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div> <h2>天知道</h2> <!-- search中的引數其實就是data中的同名引數的值 --> <!-- 使用雙向繫結實現回車查詢和點選查詢 --> <input type="text" v-model="city" @keyup.enter="search(city)"> <!-- 如果搜尋框中 --> <button @click="search(city)">搜尋</button> </div> <div> <!-- 和視訊不同使用的是一個list，點選事件呼叫的是一個帶有引數的查詢方法 --> <a v-for="(item,index) in cityArr" @click="search(cityArr[index])">{{cityArr[index]}}</a> </div> <div> <ul> <li v-for="(item,index) in weatherArr"> 日期：{{item.date}}<br> 最高溫度：{{item.high}} 最低溫度：{{item.low}} 風向：{{item.fengli}} 級數：{{item.gl}} 天氣：{{item.type}} </li> </ul> </div> </div> </body> <script> var app = new Vue({ el: "#app", data: { cityArr: ["北京", "天津", "深圳", "廣州"], city: "", weatherArr: [], }, methods: { search: function (a) { var _this = this axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + a) .then(function (response) { //列印response console.log(response) //將返回的引數賦值給weatherArr，注意層級 _this.weatherArr = response.data.data.forecast }) .catch(function (err) { }) } } }) </script> </html>