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:;">北京</a>
            <a href="javascrpt:;">上海</a>
            <a href="javascrpt:;">濮阳市</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)
            })
        }
    }
})

  

vue.js查询天气

上一篇:HTML5实现大文件分片上传组件


下一篇:Node.js安装教程