在vue3中存在多个按钮,按钮是根据数据循环生成的并且每个按钮个根据循环条件绑定不同事件并且每个按钮点击的时候传出当前循环的值
时间: 2023-05-29 09:04:23 浏览: 383
vue根据条件不同显示不同按钮的操作
可以使用v-for指令来循环生成多个按钮,同时使用@click指令来绑定不同的事件,并且将当前循环的值作为参数传入事件处理函数中。
例如:
```html
<template>
<div>
<button v-for="item in list" :key="item.id" @click="handleClick(item.value)">{{ item.label }}</button>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, label: '按钮1', value: 'value1' },
{ id: 2, label: '按钮2', value: 'value2' },
{ id: 3, label: '按钮3', value: 'value3' }
]
}
},
methods: {
handleClick(value) {
console.log(value) // 打印当前循环的值
// 根据不同的value值执行不同的操作
// ...
}
}
}
</script>
```
在上述代码中,使用v-for循环生成了三个按钮,每个按钮的label和value都来自list数组中的数据。同时,使用@click指令绑定了handleClick方法,并将当前循环的value作为参数传入。在handleClick方法中,可以根据不同的value值执行不同的操作。
阅读全文