vue循环点击事件传参

在Vue中，我们可以使用v-for指令来循环渲染一个元素，并且可以结合@click事件给循环的元素绑定点击事件。在循环点击事件中传递参数，有几种方式可以实现。

第一种方式是使用匿名函数。我们可以在@click事件后面使用匿名函数来传递参数。例如：

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

<script>
export default {
  data() {
    return {
      items: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' }
      ]
    }
  },
  methods: {
    handleClick(item) {
      console.log(item)
    }
  }
}
</script>

在这个例子中，我们通过@click事件后面的匿名函数来传递item参数，点击时会将对应的item对象输出到控制台。

第二种方式是使用bind方法。我们可以使用Function.prototype.bind方法来创建一个绑定了参数的新函数。例如：

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

<script>
export default {
  data() {
    return {
      items: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' }
      ]
    }
  },
  methods: {
    handleClick(item) {
      console.log(item)
    }
  }
}
</script>

在这个例子中，我们使用了handleClick.bind(this, item)来创建一个新的函数，并且将this和item作为参数传递进去。

无论是使用匿名函数还是bind方法，我们都可以在点击事件中传递参数，并在方法中获取到参数的值。这样就可以实现在Vue中循环点击事件传递参数的功能。