• 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)
                })

            }
        }
    })

      

  • 相关阅读:
    Cisco IOS XE 3S–to–Cisco IOS Release Number Mapping
    ORA-01157 误删表空间对应的dbf文件出现的错误的解决办法
    记录-Windows10 cnpm报禁止运行脚本
    记录-html和html5区别
    记录-查询硬盘物理序号
    CRC16 Java 实现
    kaldi解码及特征提取详解
    kaldi GMM模型解码指令 gmm-latgen-faster详解
    kaldi基于GMM的单音素模型 训练部分
    kaldi学习
  • 原文地址:https://www.cnblogs.com/xianz666/p/14832313.html
Copyright © 2020-2023  润新知