在输入 Vue 上运行 2 函数 - HTML

在 Vue 中，可以使用 v-on 指令来监听 DOM 事件，同时与 JavaScript 方法绑定。但是，如果你想在 DOM 事件中使用多个 JavaScript 方法，该怎么办呢？Vue 提供了解决方案 - 在输入 Vue 上运行2个函数！

什么是在输入 Vue 上运行2个函数？

在输入 Vue 上运行2个函数指的是，在 Vue 的事件处理程序中，绑定多个方法（函数）执行。可以通过给 v-on 指令定义一个 JavaScript 数组，来实现绑定多个函数的效果。

在 Vue 上绑定多个方法的语法结构

使用 v-on 绑定多个方法的语法结构非常简单，只需要创建一个数组，包含所有需要调用的函数即可：

<button v-on:click="[method1, method2]">绑定多个方法</button>

可以看到，定义一个数组，这个数组包含了需要绑定的两个方法，method1 和 method2。

在 Vue 上绑定多个方法的示例代码

<template>
  <div>
    <button v-on:click="add, subtract">在 Vue 上运行2个函数</button>
    <p>{{sum}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 0
    };
  },
  methods: {
    add() {
      this.sum++;
    },
    subtract() {
      this.sum--;
    }
  }
};
</script>

总结

通过在 Vue 上绑定多个方法，可以极大地提高代码的可复用性，尽可能地重用方法 / 函数，让代码更清晰，易于维护。

并且这是一个非常有用的技巧，在 Vue 事件处理的模板代码中使用，也不会显得臃肿，值得我们使用。