<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>查询天气案例</title> <style> * { margin: 0; padding: 0; } #app { width: 600px; height: 400px; margin: 100px auto; margin-left: 100px; } h1 { padding-left: 200px; } .input_txt { width: 500px; height: 38px; padding: 0; outline: none; border: 1px solid #4411aa; text-indent: 10px; float: left; } button { /* float: right; */ height: 38px; color: #fff; background-color: #444444; } a { text-decoration: none; color: #ccc; font-size: 14px; } .hotkey { float: left; } .weather_list { margin-top: 30px; list-style: none; } .weather_list { display: flex; margin-left: 5px; } b { font-size: 12px; } .info_date { font-size: 14px; margin-top: 10px; } .iconfont { font-size: 18px; } </style> </head> <body> <div id="app"> <div class="search_form"> <div class="logo"><h1>查询天气</h1></div> <div class="form_group"> <input type="text" class="input_txt" @keyup.enter="searchWeather" placeholder="请输入查询的天气" v-model="city" /> <button class="input_sub">搜 索</button> </div> <div class="hotkey"> <a href="javascript:;" @click="changeCity('北京') ">北京</a> <a href="javascript:;" @click="changeCity('上海') ">上海</a> <a href="javascript:;" @click="changeCity('广州') ">广州</a> <a href="javascript:;" @click="changeCity('深圳') ">深圳</a> </div> </div> <ul class="weather_list"> <li v-for="item in weatherList"> <div class="info_type"> <span class="iconfont">{{item.type}}</span> </div> <div class="info_temp"> <b>{{item.low}}</b> ~ <b>{{item.high}}</b> </div> <div class="info_date"><span>{{item.date}}</span></div> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> /* 天气接口 1.请求地址:http://wthrcdn.etouch.cn/weather_mini 2.请求方式:get 3.请求参数:city(查询的城市名) 4.响应内容:天气信息 分析: 1.点击回车 2.查询数据 3.渲染数据 */ const vm = new Vue({ el: '#app', data: { city: '', weatherList: [], }, methods: { searchWeather() { // console.log('查询天气') // console.log(this.city) // axios请求里面的回调函数的this发生了改变需要用that进行保存一下再使用 //但是如果使用的是箭头函数就不需要将let that = this 箭头函数没有this的指向问题 let that = this axios .get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city) .then(function (response) { // console.log(response.data.data.forecast) that.weatherList = response.data.data.forecast }) .catch(function (err) {}) }, // 使用自定义参数完成点击查询天气数据并渲染进页面的效果 // methods定义的方法内部 可以通过this关键字点出其他的方法 changeCity(city) { this.city = city this.searchWeather() }, }, }) </script> </body> </html>