• vue.js查询天气


    // html文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="serch_from">
                <input type="text" placeholder="请输入城市地址" @keyup.enter="search" class="search" v-model="city">
                <input type="button" value="搜索" @click="find">
            </div>
            <div class="hotkey">
                <a href="javascrpt:;" @click="changeCity('北京')">北京</a>
                <a href="javascrpt:;" @click="changeCity('上海')">上海</a>
                <a href="javascrpt:;" @click="changeCity('濮阳市')">濮阳市</a>

            </div>
           <ul class="weather_list">
               <li v-for="item in weatherList">
                   <div><span>{{item.type}}</span></div>
                   <div>
                       <p>{{item.low}}</p>
                       <p>{{item.high}}</p>
                   </div>
                   <div>
                       <span>{{item.date}}</span>
                   </div>
               </li>

           </ul>
        </div>
        <!--导入自己的js文件-->
        <script src="./js/main.js"></script>
        
    </body>
    </html>

      // js文件

    /*
    请求地址 http://wthrcdn.etouch.cn/weather_mini
    get请求
    请求参数 city 城市名
    */
    var vu=new Vue({
        el:"#app",
        data:{
            city:"",
            weatherList:[]

        },
        methods:{
            search:function(){
                console.log("天气查询");
                console.log(this.city);
                var that=this;//暂存this
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(res){
                    console.log(res);
                    console.log(res.data.data.forecast)
                    that.weatherList=res.data.data.forecast;
                    console.log(this.weatherList)
                }).catch(function(err){
                    console.log(err)
                })
            },
            find:function(){
                console.log("搜索>>>>>>>>>>>>")
                var that=this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(res){
                    console.log(res);
                    console.log(res.data.data.forecast)
                    that.weatherList=res.data.data.forecast;
                }).catch(function(err){
                    console.log(err)
                })
            },
            changeCity:function(city){
                console.log("点击城市>>>>>>>>>>>")
                this.city=city;
                var that=this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(res){
                    console.log(res);
                    console.log(res.data.data.forecast)
                    that.weatherList=res.data.data.forecast;
                }).catch(function(err){
                    console.log(err)
                })

            }
        }
    })

      

  • 相关阅读:
    BZOJ2286 [Sdoi2011]消耗战 【虚树 + 树形Dp】
    BZOJ1305 [CQOI2009]dance跳舞 【网络流】
    BZOJ1452 [JSOI2009]Count 【树套树 (树状数组)】
    BZOJ1103 [POI2007]大都市meg 【树剖】
    BZOJ1927 [Sdoi2010]星际竞速 【费用流】
    POJ3450 Corporate Identity 【后缀数组】
    POJ3623 Best Cow Line, Gold 【后缀数组】
    POJ3415 Common Substrings 【后缀数组 + 单调栈】
    关于线上bug
    关于线上bug
  • 原文地址:https://www.cnblogs.com/xianz666/p/14832313.html
Copyright © 2020-2023  润新知