當前位置：
首頁 >
vue实现查询多条记录_vue.js 实现天气查询
發布時間：2025/3/11
29
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue实现查询多条记录_vue.js 实现天气查询
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果預覽：http://songothao.gitee.io/weather_query_based_on_vuejs/
項目已上傳碼云：叁貳壹/vuejs實現天氣查詢
知乎視頻?www.zhihu.com一、使用 axios + vue.js:
2. axios-post 請求：
axios.post(地址, {key:value, key2:value2}).then(function(response){} ).catch( function(err){} );3. 引入 axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>二、天氣的接口 http://wthrcdn.etouch.cn/weather_mini
三、代碼實現
main.js
var app = new Vue({el: "#app",data: {city: '',forecast: []},methods: {search: function() {var that = this;axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`).then((res) => {that.forecast = res.data.data.forecast;}).catch((err) => {console.log(err);})},changeCity: function(city) {this.city = city;this.search();}} })index.html
<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>查詢天氣</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head><body><div class="wrap" id="app"><header class="header"><h1>小朋友查天氣</h1></header><section class="main"><section class="search"><input type="text" placeholder="請輸入查詢的城市" v-model='city' @keyup.enter='search'><span class="btn" @click="search">搜索</span></section><section class="common-use"><a href="javascript:;" @click="changeCity('北京')">北京</a><a href="javascript:;" @click="changeCity('上海')">上海</a><a href="javascript:;" @click="changeCity('廣州')">廣州</a><a href="javascript:;" @click="changeCity('深圳')">深圳</a></section><section class="weather"><ul><li v-for='item in forecast'><div><h1>{{item.type}}</h1><p>{{item.low}} ~ {{item.high}}</p><p>{{item.date}}</p></div></li></ul></section></section></div><script src="./js/main.js"></script> </body></html>CSDN：https://blog.csdn.net/weixin_43148062
簡書：https://www.jianshu.com/u/45339cbb7573
總結
以上是生活随笔為你收集整理的vue实现查询多条记录_vue.js 实现天气查询的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python列表是顺序表还是链表_顺序表
- 下一篇： 用python绘制好看的图形_怎么用Py