Vue --天气应用

最新推荐文章于 2024-04-12 08:55:43 发布

小王的进阶之路

最新推荐文章于 2024-04-12 08:55:43 发布

阅读量321

点赞数

分类专栏： Vue 前端 axios 文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/qq_43712409/article/details/119979159

版权

前端同时被 3 个专栏收录

56 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

axios

3 篇文章 0 订阅

订阅专栏

自定义参数可以让代码的复用性更高
methods 中定义的方法内部，可以通过 this 关键字点出其他的方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>天知道</title>
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <div class="wrap" id="app">
    <div class="search_form">
      <div class="logo"><img src="img/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气" />
        <button class="input_sub" @click="searchWeather">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <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>
    </div>
    <ul class="weather_list">
      <li v-for="item in weatherList">
        <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
        <div class="info_temp">
          <b>{{ item.low }}</b>
          ~
          <b>{{ item.high }}</b>
        </div>
        <div class="info_date"><span>{{ item.date }}</span></div>
      </li>
    </ul>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 自己的js -->
  <script src="./js/main.js"></script>
</body>

</html>

// main.js
/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var app = new Vue({
  el: "#app",
  data: {
    city: '',
    weatherList: []
  },
  methods: {
    searchWeather: function () {
      var that = this;
      axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
        .then(function (response) {
          // console.log(response);
          // console.log(response.data.data.forecast);
          that.weatherList = response.data.data.forecast;
        })
        .catch(function (err) {

        })
    },
    changeCity: function (city) {
      this.city = city;
      // 注意这里要加括号
      this.searchWeather();
    }
  }
})

小王的进阶之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue --天气应用

自定义参数可以让代码的复用性更高methods 中定义的方法内部，可以通过 this 关键字点出其他的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-U.
复制链接

扫一扫