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

Batac_

2745人浏览 · 2019-11-25 17:58:15

Batac_ · 2019-11-25 17:58:15 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^