将v-for中的变量注入on-click的值

在Vue.js中，v-for指令用于循环渲染列表。如果想将v-for中的变量注入到on-click的值中，可以使用Vue.js的事件修饰符和方法绑定。

首先，确保在Vue实例中定义一个数据属性，用于存储v-for循环的变量。例如，假设我们有一个数组dataList，包含多个对象，每个对象有一个name属性：

data() {
  return {
    dataList: [
      { name: 'John' },
      { name: 'Jane' },
      { name: 'Bob' }
    ]
  }
}

然后，在模板中使用v-for指令循环渲染列表，并将变量注入到on-click的值中。可以使用事件修饰符@click，结合方法绑定来实现：

<ul>
  <li v-for="item in dataList" :key="item.name">
    <button @click="handleClick(item.name)">Click {{ item.name }}</button>
  </li>
</ul>

在上述代码中，我们使用v-for指令循环渲染列表，并通过:item.name绑定每个列表项的唯一标识。然后，在按钮的@click事件中，调用一个方法handleClick，并将item.name作为参数传递给该方法。

最后，在Vue实例中定义handleClick方法来处理点击事件：

methods: {
  handleClick(name) {
    console.log('Clicked:', name);
    // 其他逻辑处理...
  }
}

上述代码中的handleClick方法接收name参数，可以在方法中进行相应的逻辑处理。例如，可以打印出被点击的name值。

这样，当点击按钮时，会触发handleClick方法，并将对应的name值作为参数传递进去。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）

腾讯云云服务器（CVM）是一种可随时扩展的云计算服务，提供了高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器，支持多种操作系统和应用场景。了解更多关于腾讯云云服务器的信息，请访问：腾讯云云服务器产品介绍