4.3　方法选项

在Vue中，方法可以在实例的methods选项中定义。

4.3.1　使用方法

使用方法有两种方式，一种是使用插值{{}}方式，另一种是使用事件调用。

1．使用插值方式

下面通过一个字符串翻转的示例来看一下使用插值方式的方法。

【例4.4】使用插值方式的方法（源代码\ch04\4.4.html）。

在input中通过v-model指令双向绑定message，然后在methods选项中定义reversedMessage方法，让message的内容反转，然后使用插值语法渲染到页面。

在浏览器中运行程序，然后在文本框中输入“abcdefg”，可以看到下面会显示“gfedcba”反转后的内容，如图4-5所示。

2．使用事件调用

下面通过一个“单击按钮自增的数值”示例来看一下事件调用。

【例4.5】事件调用方法（源代码\ch04\4.5.html）。

首先在data()函数中定义num属性，然后在methods中定义add()方法，该方法每次调用num自增。在页面中首先使用插值渲染num的值，使用v-on指令绑定click事件，然后在事件中调用add()方法。

在浏览器中运行程序，多次单击“增加”按钮，可以发现每次单击num值自增1，结果如图4-6所示。

4.3.2　传递参数

传递参数和正常的JavaScript传递参数的方法一样，分为如下两个步骤。

（1）在methods的方法中进行声明，例如给【例4.5】中的add方法加上一个参数a，声明如下：

（2）调用方法时直接传递参数，例如这里传递参数为2，在button上直接写：

下面我们修改【例4.5】的代码，每次单击按钮，让它自增2。

【例4.6】传递参数（源代码\ch04\4.6.html）。

在浏览器中运行程序，单击1次增加按钮，可以发现num值自增2，结果如图4-7所示。

4.3.3　方法之间调用

在Vue中，methods选项中的一个方法可以调用methods中的另外一个方法，其语法格式如下：

【例4.7】方法之间的调用（源代码\ch04\4.7.html）。

在浏览器中运行程序，结果如图4-8所示。