如何在Vue中使用\`click调用多个功能？

JavaScript

TomTom乐

2020-03-10

题：

如何在单个@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);
}

但是有时候这不是很好。

第461篇《如何在Vue中使用\`click调用多个功能？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
樱猪猪 2020.03.10

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

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

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

蛋蛋神乐 2020.03.10

在Vue 2.5.1中用于按钮工作

 <button @click="firstFunction(); secondFunction();">Ok</button>
乐卡卡西 2020.03.10

这种简单的v-on方法：click =“ firstFunction（）; secondFunction（）;”

猴子Itachi 2020.03.10

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

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
蛋蛋Near 2020.03.10

分成碎片。

排队：

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

或：通过复合函数：

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

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>
神奇Tony 2020.03.10

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android