vue之天气查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scals=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>
    

    <div id="app">
        <input type="text" placeholder="请输入地区名称" v-model="city" @keyup.enter="searchWeather">
        <button @click="searchWeather">搜索天气</button>
        <div>
            <a @click="changeCity('天津')">天津</a>
            <a @click="changeCity('武汉')">武汉</a>
            <a @click="changeCity('杭州')">杭州</a>
            <a @click="changeCity('南昌')">南昌</a>
            <a @click="changeCity('深圳')">深圳</a>
            <a @click="changeCity('南宁')">南宁</a>
        </div>
        <ul>
            <li style="list-style: none;" v-for="item in forecast">
                <span>{{item.date}}</span>
                <a>{{item.high}}</a>
                <a>{{item.fengli}}</a>
                <a>{{item.low}}</a>
                <a>{{item.fengxiang}}</a>
            </li>
        </ul>
    </div>


    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./main.js"></script>


    <script>
        
    </script>
</body>

</html>


var app = new Vue({
    el:"#app",
    data:{
        city:"",
        forecast:[]
    },
    methods:{
        searchWeather:function(){
            if(this.city.length == 0){
                alert("请输入城市");
                return;
            }
            var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
            .then(function(response){
                console.log(response.data.data.forecast);
                that.forecast = response.data.data.forecast;
            })
            .catch(function(error){
                alert("请求失败 " + error);
            })
        },
        changeCity:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})

说明:

'v-text="message" '   //一般的字符等;

'v-html="<a>{{message}}</a>"'  //和v-text功能差不多,可以解析html标签;

'v-on' //为元素绑定事件,v-on="clickT", 简写: @click="clickT";

'@dblclick="doIt"' //双击事件

'v-show=true' //根据条件判断是否显示;

'v-if' //条件判断是否显示//如果频繁使用,使用'v-show';

'v-bind:scr="http:"' //设置元素属性, 简写  :scr="http:"

'@keyup.enter=click' //键盘回车键事件;

'v-model="message"' // 双向绑定   输入框的数据会被赋值给message; 

 

 

 

发布了123 篇原创文章 · 获赞 11 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览