3.3.2　传递参数

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

步骤01 在methods的方法中进行声明，例如给【例3.4】中的subtract()方法加上一个参数s，声明如下：

    add:function(s){}

步骤02 调用方法时直接传递参数，例如这里传递传输为10，在button上直接写：

    <button v-on:click="subtract(10)">增加</button>

下面我们修改一下【例3.4】的代码，让它每次单击按钮自减10。

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

    <div id="app">
         {{num}}
       <p><button v-on:click="subtract(10)">减少</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(s){
                    this.num-=s
                 }
            }
         //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

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