在vue3的setup中存在多个按钮,按钮是根据数据循环生成的并且每个按钮个根据循环条件绑定不同事件
时间: 2023-05-29 10:04:20 浏览: 233
VUE v-for循环中每个item节点动态绑定不同函数的实例
可以使用循环渲染的方式生成多个按钮,并且通过不同的参数来绑定不同的事件。具体实现可以参考以下代码:
```
<template>
<div>
<button v-for="item in buttons" :key="item.id" @click="item.handler">{{ item.label }}</button>
</div>
</template>
<script>
export default {
setup() {
const buttons = [
{ id: 1, label: 'Button 1', handler: () => { console.log('Button 1 clicked') } },
{ id: 2, label: 'Button 2', handler: () => { console.log('Button 2 clicked') } },
{ id: 3, label: 'Button 3', handler: () => { console.log('Button 3 clicked') } },
];
return { buttons };
}
}
</script>
```
在上面的例子中,我们使用了一个数组来保存按钮的相关信息,包括id、label和handler。在循环渲染按钮的时候,我们通过v-for来遍历数组,并且使用:key来指定每个按钮的唯一标识。在绑定事件的时候,我们通过@click来监听按钮的点击事件,并且调用相应的handler函数来处理点击事件。
阅读全文