写一个uniapp的v-for指令遍历数据并生成按钮列表,然后在按钮上绑定一个单击事件,在事件处理程序中修改对应内容
时间: 2023-06-06 20:07:52 浏览: 157
好的,这个问题很好解决。以下是示例代码:
```html
<template>
<div>
<!-- 使用 v-for 遍历数据并生成按钮列表 -->
<button v-for="(btn, index) in buttonList" :key="index" @click="handleClick(index)">
{{ btn }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
buttonList: ["按钮1", "按钮2", "按钮3"], // 数据源
};
},
methods: {
handleClick(index) {
// 在事件处理程序中修改对应内容
this.buttonList[index] = "修改后的内容";
},
},
};
</script>
```
在这个示例中,我们使用了 `v-for` 指令遍历 `buttonList` 数组中的数据,并生成了对应的按钮列表。然后在按钮上绑定了一个点击事件,在点击事件处理程序中修改了对应按钮的内容。
阅读全文