vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

针对“vue实现动态给id赋值,点击事件获取当前点击的元素的id操作”的问题，我将详细讲解完整攻略，具体过程如下：

给元素动态赋值id

在Vue中，我们可以使用数据绑定语法来将id值动态赋值给元素。这可以通过v-bind指令和一个计算属性来实现。给定以下HTML内容：

<div v-for="item in items"
  v-bind:id="getItemId(item)">
  {{ item.name }}
</div>

我们可以创建一个名为getItemId的计算属性，它将接受item作为参数，并返回一个字符串，该字符串将成为元素的id。例如，我们可以创建以下组件：

Vue.component('my-items', {
  data: function () {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    }
  },

  computed: {
    getItemId: function (item) {
      return 'item-' + item.id
    }
  },

  template: `
    <div>
      <div v-for="item in items"
        v-bind:id="getItemId(item)">
        {{ item.name }}
      </div>
    </div>
  `
});

在上述代码中，我们创建了一个名为getItemId的计算属性，它将接受item作为参数，并返回一个“item-x”的字符串（其中x是item的id）。在template中，我们使用v-for指令将items数组中的每个对象渲染成一个div元素，并使用v-bind指令动态赋值id。

点击事件获取当前元素的id

一旦我们将id值动态赋值给元素后，我们就可以使用Vue提供的事件机制来触发点击事件并获取当前点击元素的id。具体做法如下所示：

<div v-for="item in items"
  v-bind:id="getItemId(item)"
  v-on:click="itemClicked($event)">
  {{ item.name }}
</div>

在上述代码中，我们添加了一个v-on:click指令来监听div元素的点击事件，当有人点击元素时，Vue会自动将事件对象作为参数传递给itemClicked方法。在组件中，我们将itemClicked方法定义如下：

Vue.component('my-items', {
  data: function () {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    }
  },

  computed: {
    getItemId: function (item) {
      return 'item-' + item.id
    }
  },

  methods: {
    itemClicked: function (event) {
      console.log(event.target.id);
    }
  },

  template: `
    <div>
      <div v-for="item in items"
        v-bind:id="getItemId(item)"
        v-on:click="itemClicked($event)">
        {{ item.name }}
      </div>
    </div>
  `
});

在我们的实例中，itemClicked方法将使用console.log方法记录事件对象中的target.id属性值。这个 id 值就是当前点击元素的 id。

示例

具体示例代码如下：

<template>
  <div>
    <div v-for="item in items"
      v-bind:id="getItemId(item)"
      v-on:click="itemClicked($event)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    };
  },

  computed: {
    getItemId: function (item) {
      return 'item-' + item.id
    }
  },

  methods: {
    itemClicked: function (event) {
      console.log(event.target.id);
    }
  }
};
</script>

在上述示例代码中，我们使用Vue单文件组件的方式来定义my-items组件，其中模板中v-bind和v-on指令的使用方式与我们之前提到的示例类似。最后，在组件的methods属性中我们定义了itemClicked方法来打印出当前点击元素的id值。