如何使用v-on调用多个函数：单击 [英] How to call multiple function with v-on:click

问题描述

如何在单个 v-on 事件中调用多个函数？
没有区别：点击，关注或其他什么？

How to call a multiple functions in single v-on event? No difference: click, focus or whatever?

类似于：

 <div v-on:click="fn1('foo');fn2('bar')"> </div>

或者可能是：

<div v-on:click="fn1('foo')" 
     v-on:click="fn2('bar')"> </div>

怎么做？

更新：是的，我当然可以做到

UPDATE: Yes, of course I always can do

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

但这真的很难看。

推荐答案

首先，您可以使用短符号 @click 而不是 v-on：为了便于阅读，请单击。

First of all you can use the short notation @click instead of v-on:click for readability purposes.

其次您可以使用一个单击事件处理程序来调用上面评论中提到的@Tushar的其他函数/方法，所以你最终会得到这样的结果：

Second You can use a click event handler that calls other functions/methods as @Tushar mentioned in his comment above, so you end up with something like this :

<div id="app">
   <div @click="handler('foo','bar')">
       Hi, click me!
   </div>
</div>

<!-- link to vue.js !--> 
<script src="vue.js"></script>

<script>
   (function(){
        var vm = new Vue({
            el:'#app',
            methods:{
                method1:function(arg){
                    console.log('method1: ',arg);
                },
                method2:function(arg){
                    console.log('method2: ',arg);
                },
                handler:function(arg1,arg2){
                    this.method1(arg1);
                    this.method2(arg2);
                }
            }
        })
    }()); 
</script>

这篇关于如何使用v-on调用多个函数：单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！