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();
        }

 

四、内容-总结