vue同时触发两个函数

1:同时触发两个函数

在 Vue 中，你可以在一个点击事件中同时触发多个方法。方法调用使用分号来分隔。

@click="changeColor(); changeBgc()"

这样，当你点击这个元素时，changeColor()和?changeBgc()?两个方法都会被依次执行。

2：在同一个方法中调用两个函数

<template>  
  <button @click="handleClick">点击触发两个函数</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleClick() {  
      this.function1();  
      this.function2();  
    },  
    function1() {  
      // 第一个函数的代码  
    },  
    function2() {  
      // 第二个函数的代码  
    }  
  }  
}  
</script>

3:使用数组语法

你也可以使用数组语法来同时触发两个函数。你可以将函数名放在一个数组中，然后在事件处理程序中调用这个数组。

<template>  
  <button @click="functionsToCall">点击触发两个函数</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    functionsToCall() {  
      [this.function1, this.function2].forEach(function => {  
        function();  
      });  
    },  
    function1() {  
      // 第一个函数的代码  
    },  
    function2() {  
      // 第二个函数的代码  
    }  
  }  
}  
</script>

下面是一个使用?forEach?的简单示例：

普通函数：

// 定义一个数组  
let numbers = [1, 2, 3, 4, 5];  
  
// 使用 forEach 遍历数组  
numbers.forEach(function(number) {  
  console.log(number);  
});

箭头函数：

// 定义一个数组  
let numbers = [1, 2, 3, 4, 5];  
  
// 使用 forEach 遍历数组  
numbers.forEach(number => console.log(number));

在这个例子中，forEach?会遍历数组?numbers?中的每个元素，并对每个元素执行提供的函数。这个函数会打印出数组中的每个元素。