3.3.1　使用方法

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

1. 使用插值

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

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

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

    <div id="app">
        输入内容：<input type="text" v-model="message"><br/>
        反转内容：{{reversedMessage()}}
     </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
         //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                message: ''
               }
            },
             //在选项对象的methods属性中定义方法
            methods: {
                reversedMessage:function () {
                    return this.message.split('').reverse().join('')
                 }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，然后在文本框中输入“生命是流淌的江河”，可以看到下面会显示“河江的淌流是命生”反转后的内容，如图3-4所示。

2. 使用事件调用

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

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

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

    <div id="app">
         {{num}}
       <p><button v-on:click="subtract()">自减</button></p>
     </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
       const vm= Vue.createApp({
           //该函数返回数据对象
           data(){
             return{
               num:100
              }
           },
            //在选项对象的methods属性中定义方法
           methods: {
               subtract:function(){
                   this.num-=1
                }
            }
         //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，多次单击“自减”按钮，可以发现num的值每次减少1，结果如图3-5所示。