Vue筆記整理，讓你快速入門Vue.js：04_5.網絡應用：（項目）天知道-點擊查詢

目錄

一、前言

二、實現思路

（1）點擊事件

（2）查詢數據和渲染數據

三、代碼實現

1、寫一個改變城市的方法【main.js】

2、給城市添加 @click 點擊事件【模板.html】

3、根據改變的城市，同步城市的天氣數據【main.js】

四、內容-總結

---

一、前言

上一節我們介紹了：天知道-介紹-回車查詢，詳見可參考博文：Vue筆記整理，讓你快速入門Vue.js：04_4.網絡應用：（項目）天知道-介紹-回車查詢 這篇博文我們來看看點擊查詢。

 

二、實現思路

（1）點擊事件

我們可以通過 v-on 指令進行綁定，修改文本框的值，本質就是修改 v-model 綁定的 data 中的數據的值。而天氣查詢的邏輯，和回車查詢是完全一樣的。只是我們需要點擊來改變城市名，所以這裏我們可以使用事件自定義參數，讓代碼更加的的靈活。

（2）查詢數據和渲染數據

我們在上一節回車查詢已經實現過了，這裏我們只需考慮如何的複用就行？類似於 data 中數據的使用，通過 this 關鍵字就可以啦，定義在 methods 中的方法，我們也可以通過 this 關鍵字給點出來，加上括號就可以調用了。這樣查詢數據和渲染數據，我們就不需要再重新編寫，直接在修改完文本框的值以後，通過 this 關鍵字調用之前定義的方法 ，就可以啦。

 

三、代碼實現

1、寫一個改變城市的方法【main.js】

        // 寫一個改變城市的方法
        changeCity:function (city) {
            this.city = city;
        }

 

2、給城市添加 @click 點擊事件【模板.html】

      <div class="hotkey">
        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:;" @click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('廣州')">廣州</a>
        <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
      </div>

 

3、根據改變的城市，同步城市的天氣數據【main.js】

        // 寫一個改變城市的方法
        changeCity:function (city) {
            this.city = city;

            // 根據改變的城市，同步城市的天氣數據
            //調用 searchWeather 方法
            this.searchWeather();
        }

 

四、內容-總結