Vue点击事件获取当前元素详解

一、vue点击事件获取当前元素的值

使用Vue提供的@click事件可以绑定元素的点击事件，使用这个事件可以轻松地获取到当前点击元素的值。

首先在模板中定义一个元素，并为其绑定@click事件。在事件触发时，Vue会将自动将事件对象传递给回调函数，而事件对象中包含了当前目标元素的引用。

以下是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item" @click="handleClick(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    handleClick(item) {
      console.log(item)
    }
  }
}
</script>

在上面的代码中，我们定义了一个ul元素，使用v-for指令渲染了一个列表。为每个li元素绑定@click事件，并且将当前元素的值传递给handleClick函数。在handleClick函数中，我们可以使用console.log将点击的元素的值输出到控制台中。

二、vue点击事件获取id

获取元素的id可以给我们更精确的标识当前操作的元素，使得操作更加明确。在Vue中，可以使用事件对象.target.id获取当前点击元素的id。

以下是代码示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" :id="item.id" @click="handleClick">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
      ],
    }
  },
  methods: {
    handleClick(event) {
      console.log(event.target.id);
    },
  },
}
</script>

在上面的代码中，我们定义了一个ul元素，并使用v-for指令渲染了一个列表。为每个li元素绑定id属性，并使用@click事件绑定事件。在handleClick函数中，我们可以通过事件对象.event.target.id获取当前点击元素的id并打印到控制台中。

三、vue点击事件获取当前元素中的内容

有时我们需要获取元素中的内容，根据内容做出下一步的操作。在Vue中，可以通过事件对象.target.innerHTML获取当前元素的内容。

以下是代码示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" @click="handleClick">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
      ],
    }
  },
  methods: {
    handleClick(event) {
      console.log(event.target.innerHTML);
    },
  },
}
</script>

在上面的代码中，我们定义了一个ul元素，并使用v-for指令渲染了一个列表。在handleClick函数中，我们可以通过事件对象.target.innerHTML获取当前点击元素中的内容并打印到控制台中。

四、vue获取点击的元素选取

在Vue中，我们可以使用refs来获取元素的引用，然后对元素进行选取、操作等。refs是Vue中专门用于获取元素引用的方法，在所有生命周期函数、methods方法中都可以访问refs。

以下是示例代码：

<template>
  <div>
    <ul ref="items">
      <li v-for="item in items" :key="item.id" @click="handleClick">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
      ],
    }
  },
  methods: {
    handleClick() {
      const items = this.$refs.items;
      // 对元素进行选取、操作等...
    },
  },
}
</script>

在上面的代码中，我们定义了一个ul元素，并使用v-for指令渲染了一个列表。我们使用ref属性将ul元素命名为items，在handleClick函数中，通过this.$refs.items获取到ul元素的引用，并进行后续的选取、操作等处理。