面试题：Vue中v - on事件监听器如何绑定动态事件名

Question

在Vue项目里，假设你有一个组件，需要根据数据的不同，动态绑定不同的事件监听器，比如当某个变量为 'click' 时绑定点击事件，为 'keyup' 时绑定键盘抬起事件，用v - on指令该如何实现？

Answer 1

在Vue组件模板中，可以这样实现：

<template>
  <div>
    <input v-bind:[event]="handleEvent">
  </div>
</template>

<script>
export default {
  data() {
    return {
      event: 'keyup', // 这里可根据实际逻辑动态修改为 'click' 等其他事件类型
    };
  },
  methods: {
    handleEvent() {
      // 处理事件的逻辑
      console.log('事件触发了');
    }
  }
};
</script>

上述代码通过动态绑定v - on指令（使用v - bind:[event]的语法糖形式），根据event变量的值动态绑定不同的事件监听器。event变量可以在组件的data中定义并根据业务逻辑修改，handleEvent方法是对应的事件处理函数。