使用vue制作的简易天气查询

最新推荐文章于 2024-08-02 00:51:30 发布

来旺

最新推荐文章于 2024-08-02 00:51:30 发布

阅读量543

点赞数 1

本文链接：https://blog.csdn.net/Young_Naive/article/details/105322389

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <input
          type="text"
          placeholder="请输入查询的天气"
          @keyup.enter="searchWeather"
          v-model="city"
        />
        <button @click="searchWeather">search</button>
      </div>
      <div>
        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:;" @click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
        <a href="javascript:;" @click="changeCity('广州')">广州</a>
      </div>
      <ul>
        <li v-for="item in weatherList" style="float: left;">
          <div><span>{{item.type}}</span></div>
          <div>
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div><span>{{item.date}}</span></div>
        </li>
      </ul>
    </div>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="天气查询.js"></script>
  </body>
</html>

var vm = new Vue({
    el: "#app",
    data: {
        city: "",
        weatherList: [],
    },
    methods: {
        searchWeather: function () {
            // console.log("天气查询");
            // console.log(this.city);
            //调用接口
            //保存this
            var that = this;
            axios
                .get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
                .then(function (response) {
                    // console.log(response.data.data.forecast);
                    that.weatherList = response.data.data.forecast;
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        changeCity: function (city) {
            this.city = city;
            this.searchWeather();
        }
    },
});