在vue3中存在多个按钮,按钮是根据数据循环生成的并且每个按钮个根据循环条件绑定不同事件并且每个事件传出当前循环的值
时间: 2023-05-29 22:04:25 浏览: 169
vue根据条件不同显示不同按钮的操作
在Vue3中,可以使用v-for指令循环生成多个按钮,并使用@click绑定不同的事件。
例如,假设有一个数组data,包含多个对象,每个对象有一个name属性,可以这样循环生成按钮:
```
<template>
<div>
<button v-for="(item, index) in data" :key="index" @click="handleClick(item.name)">
{{ item.name }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ name: '按钮1' },
{ name: '按钮2' },
{ name: '按钮3' }
]
}
},
methods: {
handleClick(name) {
console.log(name)
// 在这里可以处理点击事件,传出当前循环的值
}
}
}
</script>
```
在这个例子中,v-for循环遍历data数组中的每个对象,生成一个按钮,并使用@click绑定handleClick方法。当点击按钮时,handleClick方法会接收到当前循环的对象的name属性,并可以在方法中处理点击事件,传出当前循环的值。
阅读全文