<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <style> .myWidth{ width: 500px; hight:250px; border: 1px solid red; } </style> </head> <body> <div id="app"> <h3>天气预报</h3> <p> <input type="text" v-model="city" @keypress.enter="getWeather"> <a href="javascript:;" @click="changeCity(‘北京‘)"> 北京 </a> <a href="javascript:;" @click="changeCity(‘上海‘)"> 上海 </a> <a href="javascript:;" @click="changeCity(‘广州‘)"> 广州 </a> <a href="javascript:;" @click="changeCity(‘深圳‘)"> 深圳 </a> <input type="button" value="查询天气" @click="getWeather"> </p> <div class="myWidth"> <p > {{city + str}} </p> <ul style="list-style-type: none;" v-for="(items, index) in weathers"> <li> <span> {{items.date}} </span> <span> {{items.high}} </span> <span> {{items.low}} </span> <span> {{items.type}} </span> </li> </ul> </div> </div> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 引入axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） city: "", weathers:[], str: "天气预报" }, methods: { // a标签修改城市 changeCity(city){ // 更改城市 this.city = city; // 调用getWeather方法 this.getWeather(); }, // 获取天气 getWeather(){ console.log(this.getMsg) var that = this; axios({ //设置请求方式，不设置默认是get method: "GET", //设置url和path baseURL:"http://wthrcdn.etouch.cn/weather_mini?city="+this.city, url:"", // 设置头信息 headers:{ }, // 请求数据 data:{ } }).then( function (response){ // console.log(response.status); // console.log(response.data); // axios 回调函数内部拿不到this console.log(response) console.log(response.data.data.forecast); that.weathers = response.data.data.forecast; }, function(err){ console.log(err); } ) } } }) </script> </body> </html>
原文：https://www.cnblogs.com/lizitestdev/p/14645350.html