Vue.js中如何选择多个同class的DOM元素并添加点击事件？

1. 最推荐：数据驱动 + Vue原生事件绑定 #

如果这些元素是通过Vue的列表渲染（v-for）生成的，直接在模板里绑定@click是最符合Vue设计理念的做法：

<template>
  <div>
    <!-- 假设items是你的数据源 -->
    <div v-for="(item, index) in items" :key="index" @click="handleItemClick(item, index)">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 填充你的数据列表 */]
    }
  },
  methods: {
    handleItemClick(item, index) {
      // 这里编写点击逻辑，可直接获取当前项的数据和索引
      console.log('点击了第', index, '项', item)
    }
  }
}
</script>

2. 针对静态DOM元素（不推荐，优先用上面的方法） #

如果元素是静态存在、非v-for生成的，非要操作DOM的话，可以用以下两种方式：

方法一：使用$refs #

给目标元素统一绑定ref（绑定在多个元素上时，$refs会返回DOM元素数组）：

<template>
  <div>
    <div class="target-class" ref="targetElements">元素1</div>
    <div class="target-class" ref="targetElements">元素2</div>
    <div class="target-class" ref="targetElements">元素3</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 遍历ref数组添加事件监听
    this.$refs.targetElements.forEach(el => {
      el.addEventListener('click', this.handleClick)
    })
  },
  beforeUnmount() {
    // 组件卸载前移除事件监听，避免内存泄漏
    this.$refs.targetElements.forEach(el => {
      el.removeEventListener('click', this.handleClick)
    })
  },
  methods: {
    handleClick(e) {
      // 点击逻辑
      console.log('点击了元素', e.target)
    }
  }
}
</script>

方法二：在生命周期钩子中用原生querySelectorAll #

和你原生JS的写法类似，但要放在mounted钩子中，确保DOM已渲染完成：

<script>
export default {
  mounted() {
    const elements = document.querySelectorAll('.target-class')
    elements.forEach(el => {
      el.addEventListener('click', this.handleClick)
    })
  },
  beforeUnmount() {
    const elements = document.querySelectorAll('.target-class')
    elements.forEach(el => {
      el.removeEventListener('click', this.handleClick)
    })
  },
  methods: {
    handleClick(e) {
      // 点击逻辑
      console.log('点击了元素', e.target)
    }
  }
}
</script>

关键提醒 #

Vue的核心是数据驱动视图，除非特殊场景，尽量避免直接操作DOM。优先使用v-for结合@click的方式，既能保证代码可维护性，也符合Vue的设计逻辑。

内容的提问来源于stack exchange，提问作者user19610519