3.1　方法选项

在Vue.js 3.x中，组件的方法可以在实例的methods选项中定义。

3.1.1　使用方法

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

1．使用插值方式

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

【例3.1】　使用插值的方法（源代码\ch03\3.1.html）。

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

在Chrome浏览器中运行程序，然后在文本框中输入“江碧鸟逾白，山青花欲燃。”，可以看到下面会显示反转后的内容“。燃欲花青山，白逾鸟碧江”，如图3-1所示。

图3-1　使用插值的方法

2．使用事件调用

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

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

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

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

图3-2　事件调用方法

3.1.2　传递参数

Vue.js传递参数分为如下两个步骤。

01 在methods方法中进行声明，例如给【例3.2】中的add方法加上一个参数a，声明格式如下：

     add:function(a){}

02 调用方法时直接传递参数，例如这里传递参数2，在按钮button上直接写：

     <button v-on:click="add(2)">增加</button>

下面修改【例3.2】的代码，每次单击“增加”按钮，让它自增2。

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

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

图3-3　传递参数

3.1.3　方法之间的调用

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

     this.$options.methods.+方法名

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

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

图3-4　方法之间的调用 QljLx5HEpSNtUYz3iYz7cpHJHxpDbq9+a8mmbTSYiw0atfgb7q33MwReTowl4Avz