本节主要介绍为页面按钮绑定事件的方法,图2-19所示的页面布局了三个按钮,分别是“警告按钮”按钮、“地图放大”按钮和“地图缩小”按钮。
图2-19 布局了三个按钮的页面
单击图2-19中的“警告按钮”按钮可弹出提示框,如图2-20所示;单击“地图放大”按钮可放大地图,如图2-21所示;单击“地图缩小”按钮可缩小地图,如图2-22所示。
为上述三个按钮绑定事件的方法是:创建Vue实例,将methods中的warningBtnHandleClick作为单击“警告按钮”按钮时的响应事件,将methods中的zoomUpBtnHandleClick作为单击“地图放大”按钮时的响应事件,将methods中的zoomOutBtnHandleClick作为单击“地图缩小”按钮时的响应事件。实现代码如下:
图2-20 单击“警告按钮”按钮的效果
图2-21 单击“地图放大”按钮的效果
图2-22 单击“地图缩小”按钮的效果
页面布局代码如下: