Vue 内联处理方法传递参数

2017年05月09日 10:43 | 266次浏览 | 分类: vue2教程

除了直接绑定到一个方法,也可以用内联 JavaScript 语句,传递参数。

<!DOCTYPE html>
<html>
<head>
    <title>Vue监听事件</title>
</head>
<body>
    <div id="app">
        <button v-on:click="add(2)"> 增加 2</button>
        <!-- `reduction` 是在下面定义的方法名 -->
        <button v-on:click="reduction">减少 1</button>
        <p>点击了 {{ counter }} 次</p>
    </div>
     <script type="text/javascript" src="../js/vue.js"></script>
     <script type="text/javascript">
         var app = new Vue({
             el: '#app',
             data: {
                counter: 0
             },
            // 在 `methods` 对象中定义方法
            methods: {
                reduction(){
                    // `this` 在方法里指当前 Vue 实例
                    this.counter --;
                },
                add(step){
                    this.counter += step;
                }
            }
         });
     </script>
</body>
</html>



感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:Vue 监听事件 下一篇:vue 事件修饰符
^