Vue implements weather forecast function

Vue implements weather forecast function

This article shares the specific code of Vue to realize the weather forecast function for your reference. The specific content is as follows

1. Functional description

Enter a city in the search box and the weather conditions for today and the next four days will appear below. There are several cities fixed below the search box, and you can click them for quick search.

2. HTML code

 <div id="app">
        <div id="srchbar">
            <input type="text" v-model="city" @keyup.enter="srch(city)" id="ipt">
            <a @click=srch(city) id="btn">search</a>
        </div>
        <nav>
            <a href="#" @click="srch('北京')">Beijing</a>
            <a href="#" @click="srch('上海')">Shanghai</a>
            <a href="#" @click="srch('Guangzhou')">Guangzhou</a>
            <a href="#" @click="srch('深圳')">深圳</a>
        </nav>
        <div id="res">
            <table>
                <tr>
                    <th v-for="item in forecasts">{{item.type}}</th>
                </tr>
                <tr>
                    <td v-for="item in forecasts">{{item.low}}~{{item.high}}</td>
                </tr>
                <tr>
                    <td v-for="item in forecasts">{{item.date}}</td>
                </tr>
            </table>
        </div>
</div>

3.js code

var app = new Vue({
        el: "#app",
        data: {
            city: "",
            forecasts: []
        },
        methods: {
            srch: function (c) {
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + c).then(function (message) {
                    that.city = c;
                    that.forecasts = message.data.data.forecast;
                })
            }

        }
})

Results

Summarize

The main practice was v-for , v-model , v-on expressions , and using axios to request data through the interface.

During my previous study, I collected a section of js key code about the weather forecast function and shared it with you to learn together.

// Request address: http://wthrcdn.etouch.cn/weather_mini
// Request method: get,
// Request parameter: city (city name)
// Response content: weather information,

// 1. Click Enter // 2. Query data // 3. Render data var app = new Vue({
 el: '#app',
 data: {
  city: '',
  weatherList: [],
 },
 methods: {
  serchWeather: function() {
   // console.log('Weather query');
   // console.log(this.city)
   //Call interface//Save 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) {})
  },
  changeCity: function(city) {
          //1. Change city //2. Check weather this.city=city;
     this.serchWeather();
  }
 }
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Detailed explanation of how to use Vue to load weather components
  • Vue implements a small weather forecast application
  • How to use webSocket to update real-time weather in Vue
  • Vue Getting Started with Weather Forecast

<<:  How to solve the problem of Ubuntu 18.04 looping login/stuck on the boot interface/unable to enter the graphical interface

>>:  Summary of various implementation methods of mysql database backup

Recommend

How to build lnmp environment in docker

Create a project directory mkdir php Create the f...

Detailed tutorial on compiling and installing MySQL 5.7.24 on CentOS7

Table of contents Install Dependencies Install bo...

MySQL permission control details analysis

Table of contents 1. Global level 2. Database lev...

Discussion on CSS style priority and cascading order

In general : [1 important flag] > [4 special fl...

MySQL replication table details and example code

MySQL replication table detailed explanation If w...

Detailed explanation of how to copy and backup docker container data

Here we take the Jenkins container as an example ...

How to prompt and open hyperlink a

<br />The countless information on the Inter...

MySQL UNION operator basic knowledge points

MySQL UNION Operator This tutorial introduces the...

How to view and configure password expiration on Linux

With the right settings, you can force Linux user...

A brief discussion on CSS3 animation jamming solutions

Why is it stuck? There is a premise that must be ...

Document Object Model (DOM) in JavaScript

Table of contents 1. What is DOM 2. Select elemen...

How to query the latest transaction ID in MySQL

Written in front: Sometimes you may need to view ...