目录
一、前言
上一节我们介绍了:天知道-介绍-回车查询,详见可参考博文: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();
}