Vue.js天气查询

2024-04-22 17

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue.js天气查询

HTML

<div id="app">
      <div id="header">
        <h1>天气预报查询</h1>
        <p><input @keyup.enter="search()" type="text" v-model="city" id="city"
            placeholder="请输入要查询天气的城市" /><button type="button" @click="search()">查询</button></p>
        <p>当前时间：<input type="text" id="date"  readonly="readonly"/></p> 
      </div>
 
      <div id="nav">
        <div v-for="w in weatherlist">
          <h2>{{w.type}}</h2>
          <p>{{w.low}}~{{w.high}}</p>
          <p>{{w.fengxiang}}</p>
          <p>{{w.date}}</p>
        </div>
      </div>
    </div>

CSS

* {
        padding: 0;
        margin: 0;
      }
 
      #app {
        width: 800px;
        height: 600px;
        border: aqua 3px solid;
        margin: 50px auto;
        padding-top: 40px;
        background-color: aquamarine;
 
      }
 
      #header {
        text-align: center;
      }
 
      #nav>div {
        width: 180px;
        margin: 5px 9px;
        /* 边框线宽度为1px占用1px */
        border: pink 1px solid;
        display: inline-block;
        text-align: center;
      }
 
      button {
        padding: 3px;
        background-color: greenyellow;
        margin-left: 5px;
      }
 
      #city {
        padding: 3px 0;
      }
 
      h1 {
        text-align: center;
        font-size: 50px;
        color: brown;
      }
 
      h2 {
        text-align: center;
        color: #5d68ff;
      }
      #date {
        width: 200px;
        height: 30px;
        border: none;
        padding: 2px 10px;
                outline: none;/* 去除边框聚焦效果 */  
      }
      input {
        background-color: aquamarine;/* 输入框背景色 */
      }

JS

new Vue({
        el: "#app",
        data: {
          city: "",
          weatherlist: []
        },
        methods: {
          search: function() {
            var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(function(resp) {
                console.log(resp.data.data.forecast);
                that.weatherlist = resp.data.data.forecast;
              })
              .catch(function(err) {
                alert("城市输入有误！")
              })
          }
        }
      })
      //显示时间
      function showTime() {
        var t = new Date()
        var year = t.getFullYear();
        var month = t.getMonth();
        var day = t.getDate();
        var week = t.getDay();
        var arr = new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期日");
        var hour = t.getHours();
        var minute = t.getMinutes();
        var second = t.getSeconds();                
        var showTime = year+"/"+month+"/"+day+" "+arr[week]+" "+hour+((minute<10)?":0":":")+minute+((second<10)?":0":":")+second;
        document.getElementById("date").value=showTime;
      }
      setInterval("showTime()",1000);