axios模块学习 

<!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>

 

posted on 2021-08-07 18:19  torotoise512  阅读(29)  评论(0)    收藏  举报