vuejs小例子之天氣查詢

2022-06-11 16:30:09 字數 1464 閱讀 7419

看乙個例子:

<

html

>

<

head

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

head

>

<

body

>

<

div

id>

<

input

type

="text"

v-model

="city"

@keyup.enter

="getweathers"

>

<

button

@click

="getweathers"

>查詢

button

>

<

br>

<

br>

<

a href

="#"

@click

="changecity('北京')"

>北京

a>

<

a href

="#"

@click

="changecity('武漢')"

>武漢

a>

<

a href

="#"

@click

="changecity('上海')"

>上海

a>

<

a href

="#"

@click

="changecity('深圳')"

>深圳

a>

<

ul>

<

li v-for

="(item, index) in weathers"

>

} } } }

li>

ul>

div>

<

script

>

var vue = new vue(,

methods: , function (err) )

},changecity: function (city) ,

},})

script

>

body

>

html

>

效果:

在輸入框中輸入城市,例如武漢,回車或者點選按鈕查詢:

會顯示相關資訊。

點選下面的四個城市:

也會顯示相關資訊。

說明:使用v-model,v-on點選事件,v-on回車事件,v-for遍歷資料,axios傳送請求。

天氣查詢python小程式

匯入工具庫 import urllib.request import gzip city name input 請輸入要查詢的城市名稱 將城市的中文名字編碼成utf 8字元 urllib.parse.quote city name 生成完整url鏈結 url urllib.parse.quote c...

vue之天氣查詢

天津武漢 杭州南昌 深圳南寧 data methods var that this axios.get this.city then function response catch function error changecity function city 說明 v text message 一...

python網頁爬蟲之天氣查詢

這是用python寫的天氣查詢 可用。這裡用的是和風天氣的介面 參考 我用的城市資料 將城市資料存放本地 jsons import pickle pickle file open city data.pkl wb pickle.dump jsons,pickle file pickle file.c...