vue天氣查詢

天氣查詢包括回車查詢和點擊查詢兩種功能

回車查詢

1.按下回車（v-on+.enter）

2.查詢數據（axios+接口+v-model）

3.渲染數據（v-for+arr）

點擊查詢

1.點擊城市查詢（v-on+自定義參數）

2.查詢數據（this.）

3.渲染數據（this.）

<template>
  <div id="app">
    <div>
      <div id="one">
        <input type="text" v-model="city" placeholder="請輸入需要查詢城市名" @keyup.enter="search" /><button @click="search">搜索</button>
      </div>
      <div id="two">
        <a href="javascript:;" @click="change('北京')">北京</a>
        <a href="javascript:;" @click="change('上海')">上海</a>
        <a href="javascript:;" @click="change('廣州')">廣州</a>
        <a href="javascript:;" @click="change('深圳')">深圳</a>
      </div>
      <ul id="three">
        <li v-for="value in wList">
          <div>
            <span>{{value.type}}</span>
          </div>
          <div>
            <b>{{value.low}}</b>
            ~
            <b>{{value.high}}</b>
          </div>
          <div>
            <span>{{value.date}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      city: "",
      wList: []
    };
  },
  methods: {
    search: function() {
      console.log(this.city);
      var that = this;
      this.$axios({
        url: "http://wthrcdn.etouch.cn/weather_mini?city=" + this.city,
        methods: "get"
      })
        .then(function(response) {
          // console.log(response.data.data.forecast)
          that.wList = response.data.data.forecast;
        })
        .catch(function(err) {});
    },
    change: function(city) {
      this.city = city;
      // methods中定義的方法內部，可以通過this關鍵字調用其他的方法
      this.search();
    }
  },
  created: function() {}
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

ul,
li {
  list-style: none;
  padding: 0;
}
#app>div{
  width: 900px;
  margin: 0 auto;
}
#one{
  text-align: left;
  margin-left: 150px;
}
#one input{
  width: 400px;
  height: 30px;
  border: 2px solid #ccc;
}
#one button{
  width: 80px;
  height: 35px;
  background-color: #0af;
  border: 0;
}
#two{
  text-align: left;
  margin-bottom: 40px;
  margin-left: 155px;
  margin-top: 5px;
}
#two a{
  color: rgb(102, 99, 99);
  text-decoration: none;
  font-size: 14px;
}
#three li{
  float: left;
  border-right: 2px solid #ccc;
  padding: 6px;
}
#three li:first-child{
  padding-left:0; 
}
#three li:last-child{
  border: 0
}
li div{
  margin: 10px 0;
}
li div:first-child span{
  font-size: 20px;
  color: #ef7000;
  font-weight: bold;
}
li div:first-child{
  margin-top: 0
}
li div:last-child span{
  font-size: 14px;
  color: #999;
}
li div:last-child {
  margin-bottom: 0
}
</style>