面试题：v-on 在 Vue 中可以绑定多个方法吗？

是的，在 Vue 中，v-on 可以绑定多个方法。Vue 提供了多种方式来实现这一点，以下是常见的几种方法：

---

一、使用对象语法

可以通过对象语法为同一个事件绑定多个方法，对象的键是事件名，值是方法数组。

示例：

<template>
  <button v-on="{ click: [method1, method2] }">点击我</button>
</template>

<script>
export default {
  methods: {
    method1() {
      console.log('方法 1 被调用');
    },
    method2() {
      console.log('方法 2 被调用');
    }
  }
};
</script>

---

二、使用数组语法

可以直接在 v-on 中绑定一个方法数组，Vue 会依次调用这些方法。

示例：

<template>
  <button v-on:click="[method1, method2]">点击我</button>
</template>

<script>
export default {
  methods: {
    method1() {
      console.log('方法 1 被调用');
    },
    method2() {
      console.log('方法 2 被调用');
    }
  }
};
</script>

---

三、在方法中调用多个方法

可以在一个方法中调用多个其他方法。

示例：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.method1();
      this.method2();
    },
    method1() {
      console.log('方法 1 被调用');
    },
    method2() {
      console.log('方法 2 被调用');
    }
  }
};
</script>

---

四、使用修饰符

可以通过修饰符为同一个事件绑定多个方法。

示例：

<template>
  <button @click.stop="method1" @click.prevent="method2">点击我</button>
</template>

<script>
export default {
  methods: {
    method1() {
      console.log('方法 1 被调用');
    },
    method2() {
      console.log('方法 2 被调用');
    }
  }
};
</script>

---

五、总结

方法	示例	适用场景
对象语法	v-on="{ click: [method1, method2] }"	需要为同一个事件绑定多个方法
数组语法	v-on:click="[method1, method2]"	需要为同一个事件绑定多个方法
方法中调用	handleClick() { method1(); method2(); }	需要在同一个方法中调用多个方法
修饰符	@click.stop="method1" @click.prevent="method2"	需要为同一个事件绑定多个方法并应用修饰符

通过以上方法，可以灵活地为同一个事件绑定多个方法，满足不同的开发需求。