vue2如何通过className获取dom元素并且绑定点击函数，给我代码实现

在 Vue2 中，可以通过 `$refs` 来获取 DOM 元素，然后通过 `classList` 属性来获取其类名，进而操作 DOM 元素。下面是代码实现：

<template>
  <div ref="box" class="box" @click="handleClick"></div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('box clicked')
    }
  },
  mounted() {
    const box = this.$refs.box
    box.classList.add('active')
  }
}
</script>

在上面的代码中，我们首先通过 `ref` 属性给 `div` 元素命名为 `box`，然后在 mounted 钩子函数中获取了该 DOM 元素，并通过 `classList` 属性添加了一个名为 `active` 的类名。最后，我们给 `div` 元素绑定了一个 `@click` 事件，当点击该元素时触发 `handleClick` 方法，控制台输出 `box clicked`。

需要注意的是，当使用 `$refs` 获取 DOM 元素时，需要等到组件 mounted 钩子函数执行后才能获取到该元素，否则会报错。

相关问题

vue中获取点击的dom元素

在Vue中，你可以使用事件处理器来获取点击的DOM元素。你可以使用`@click`指令来绑定一个点击事件，并在方法中访问事件对象(`$event`)来获取点击的DOM元素。下面是一个示例：

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

<script>
export default {
  methods: {
    handleClick(event) {
      // 获取点击的DOM元素
      const targetElement = event.target;
      console.log(targetElement);
    }
  }
}
</script>

在上述示例中，当按钮被点击时，`handleClick`方法会被调用。通过访问`event.target`，你可以获取到被点击的DOM元素，并可以在控制台输出它。

希望对你有帮助！如有更多问题，请随时提问。

vue2获取dom元素

在Vue.js 2中，可以使用`ref`属性来获取DOM元素。下面是一个示例：

<template>
  <div>
    <button ref="buttonRef" @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 通过this.$refs访问DOM元素
      const buttonElement = this.$refs.buttonRef;
      console.log(buttonElement);
    }
  }
}
</script>

在上面的例子中，我们给按钮添加了一个`ref`属性，并命名为`buttonRef`。然后在`handleClick`方法中，我们可以通过`this.$refs.buttonRef`来访问该按钮的DOM元素。

请注意，使用`ref`属性获取DOM元素时，需要确保在组件渲染完成后才能访问到正确的DOM元素。