如何基于变量以编程方式添加事件？Vue场景实现疑问

刚好遇到过类似的问题，你的写法@click="clickable ? clicked : null"其实逻辑有问题——Vue会始终绑定click事件，只是点击时会根据条件执行clicked或者null（null不会触发任何操作）。如果你的需求是仅当条件为true时才绑定事件，或者想让条件判断更清晰，这里有几种靠谱的方案：

方案1：在事件处理函数内部判断条件（最推荐） #

这种方式最简单直观，不管是全局条件还是v-for中每个项的独立条件都适用，代码可读性也高：

<template>
  <div id="app">
    <!-- 单个元素的情况 -->
    <div class="main" @click="handleClick"></div>

    <!-- v-for循环场景 -->
    <div 
      v-for="item in items" 
      :key="item.id" 
      class="item" 
      @click="() => handleItemClick(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clickable: true, // 全局可点击状态
      items: [
        { id: 1, name: "Item 1", clickable: true },
        { id: 2, name: "Item 2", clickable: false },
      ],
    };
  },
  methods: {
    clicked() {
      console.log("触发点击事件！");
    },
    handleClick() {
      // 判断全局条件，满足才执行目标函数
      if (this.clickable) {
        this.clicked();
      }
    },
    handleItemClick(item) {
      // v-for中针对每个项的条件判断
      if (item.clickable) {
        console.log(`点击了：${item.name}`);
      }
    },
  },
};
</script>

方案2：使用动态事件名实现“条件绑定” #

如果你确实需要仅当条件为true时才绑定事件（而不是绑定后判断），可以用Vue的动态事件名语法：

<template>
  <div id="app">
    <!-- 单个元素：clickable为true时绑定click事件，否则不绑定 -->
    <div class="main" @[clickable ? 'click' : '']="clicked"></div>

    <!-- v-for场景：根据每个item的clickable状态决定是否绑定 -->
    <div 
      v-for="item in items" 
      :key="item.id" 
      class="item"
      @[item.clickable ? 'click' : '']="() => clicked(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

这里的逻辑是：当条件为false时，事件名设为空字符串，Vue会自动忽略这个事件绑定，不会给元素添加click监听。

为什么你的原写法不生效？ #

你之前的@click="clickable ? clicked : null"，本质是给元素绑定了一个匿名函数，内容是clickable ? clicked : null。如果clicked是你定义的methods方法，正确的写法应该是调用它：@click="clickable ? clicked() : null"——注意要加括号！不过即使这样，事件还是会被绑定，只是点击时可能不执行逻辑，这和你想要的“条件绑定”还是有区别的。

内容的提问来源于stack exchange，提问作者A. L