4.3.1　使用方法

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

1．使用插值方式

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

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

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

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

图4-5　使用插值方式的方法

2．使用事件调用

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

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

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

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

图4-6　事件调用方法