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 descriptionEnter 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 codevar 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:
|
>>: Summary of various implementation methods of mysql database backup
Create a project directory mkdir php Create the f...
Table of contents Install Dependencies Install bo...
Table of contents 1. Global level 2. Database lev...
1. Download, I take 8.0 as an example Download ad...
In general : [1 important flag] > [4 special fl...
MySQL replication table detailed explanation If w...
Here we take the Jenkins container as an example ...
<br />The countless information on the Inter...
The full name of SSH is Secure SHell. By using SS...
MySQL UNION Operator This tutorial introduces the...
introduction Today I learned how to connect to th...
With the right settings, you can force Linux user...
Why is it stuck? There is a premise that must be ...
Table of contents 1. What is DOM 2. Select elemen...
Written in front: Sometimes you may need to view ...