如何在Vue中使用@click调用多个功能?

题:

如何在单个@click中调用多个函数?(又名v-on:click)?

我试过了

  • 拆分功能用分号:<div @click="fn1('foo');fn2('bar')"> </div>;

  • 使用几个@click<div @click="fn1('foo')" @click="fn2('bar')"> </div>;

但是如何正确地做呢?

PS:当然,我总是可以做

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

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

但是有时候这不是很好。

樱猪猪2020/03/10 11:43:41

如果您想让内容更具可读性,可以尝试以下操作:

<button @click="[click1($event), click2($event)]">
  Multiple
</button>

对我来说,这种解决方案让您更喜欢Vue

蛋蛋神乐2020/03/10 11:43:41

在Vue 2.5.1中用于按钮工作

 <button @click="firstFunction(); secondFunction();">Ok</button>
乐卡卡西2020/03/10 11:43:41

这种简单的v-on方法:click =“ firstFunction(); secondFunction();”

猴子Itachi2020/03/10 11:43:41

当您需要通过单击对话框中的按钮来打开另一个对话框并关闭该对话框时,这对我有用。使用逗号分隔符将值作为参数传递。

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
蛋蛋Near2020/03/10 11:43:41

分成碎片。

排队:

<div @click="f1() + f2()"></div> 

或:通过复合函数:

<div @click="f3()"></div> 

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>
神奇Tony2020/03/10 11:43:41

在Vue 2.3及更高版本上,您可以执行以下操作:

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>