Vue が天気予報機能を実装

この記事では、天気予報機能を実現するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. 機能説明

検索ボックスに都市を入力すると、今日と今後 4 日間の天気が下に表示されます。検索ボックスの下にいくつかの都市が固定されており、それをクリックするとクイック検索ができます。

2. HTMLコード

 <div id="アプリ">
        <div id="srchbar">
            <input type="text" v-model="city" @keyup.enter="srch(city)" id="ipt">
            <a @click=srch(city) id="btn">検索</a>
        </div>
        <ナビ>
            <a href="#" @click="srch('北京')">北京</a>
            <a href="#" @click="srch('上海')">上海</a>
            <a href="#" @click="srch('広州')">広州</a>
            <a href="#" @click="srch('深圳')">深圳</a>
        </nav>
        <div id="res">
            <テーブル>
                <tr>
                    <th v-for="予測内のアイテム">{{item.type}}</th>
                </tr>
                <tr>
                    <td v-for="予測内のアイテム">{{item.low}}~{{item.high}}</td>
                </tr>
                <tr>
                    <td v-for="予測内のアイテム">{{item.date}}</td>
                </tr>
            </テーブル>
        </div>
</div>

3.jsコード

var アプリ = 新しい Vue({
        el: "#app",
        データ： {
            市： ""、
            予測: []
        },
        メソッド: {
            検索: 関数 (c) {
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + c).then(function (message) {
                    .city = c;
                    that.forecasts = message.data.data.forecast;
                })
            }

        }
})

結果

要約する

主な実践は、 v-for 、 v-model 、 v-on 式、およびaxiosを使用してインターフェースを介してデータを要求することでした。

前回の勉強中に、天気予報機能に関する js キーコードのセクションを収集し、皆さんと共有して一緒に学習しました。

// リクエストアドレス: http://wthrcdn.etouch.cn/weather_mini
// リクエストメソッド: get,
// リクエストパラメータ: city (都市名)
// 応答内容: 天気情報、

// 1. Enter キーを押す // 2. データをクエリする // 3. データをレンダリングする var app = new Vue({
 el: '#app',
 データ： {
  市： ''、
  天気リスト: [],
 },
 メソッド: {
  サーチ天気: 関数() {
   // console.log('天気クエリ');
   // コンソールログ(this.city)
   //インターフェースを呼び出す//これを保存する
   var that = this;
   axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
    .then(関数(応答) {
     console.log(応答データ予測)
     that.weatherList = response.data.data.forecast
    }).catch(関数(err) {})
  },
  都市を変更する: 関数(都市) {
          //1. 都市を変更する //2. 天気を確認する this.city=city;
     this.serchWeather();
  }
 }
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: