<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> <style> .c1{ background-color: rebeccapurple; } </style> </head> <body> <div id="app"> <h3>搜索天气信息</h3> <input type="text" placeholder="城市" v-model="city"> <button @click="search">搜索</button> <div class="weather" style="border: 1px solid red;"> <ul> <li v-for="item in forecast" :class="{c1:item.high>'高温 32'}">{{item.date}}:{{item.type}} 最高气温：{{item.high}} 最低气温：{{item.low}}</li> </ul> </div> </div> <script> vm = new Vue({ el:"#app", data:{ city:"北京", forecast:[], }, methods:{ search(){ console.log("this",this) window.vue = this // 发送Ajax请求，获取搜索城市的天气数据 // 想服务器发送Ajax请求，获取某个城市的天气信息 axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (res){ // then： 响应服务器的回应函数 console.log("res:",res.data.data.forecast); this.vue.forecast = res.data.data.forecast }) }, } }) </script> </body> </html>