在div中循环出来了n个elementUI中的计数器,n是可变的,我该怎么给每个计数器动态的绑定上值,并且该如何获取它
时间: 2024-02-05 20:11:08 浏览: 80
可以使用`v-for`指令循环出`n`个计数器,然后利用计数器的`v-model`指令动态绑定值。具体实现如下所示:
```html
<template>
<div>
<el-row>
<el-col v-for="(item, index) in counterList" :key="index" :span="8">
<el-input-number v-model="item.value" @change="handleChange(index)" />
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
counterList: [
{ value: 1 },
{ value: 2 },
{ value: 3 }
]
};
},
methods: {
handleChange(index) {
// 获取指定计数器的值
const value = this.counterList[index].value;
console.log(`第${index + 1}个计数器的值为${value}`);
}
}
};
</script>
```
在上面的代码中,我们定义了一个`counterList`数组,其中包含了`n`个对象,每个对象中都有一个`value`属性,表示计数器的值。利用`v-for`指令循环出每个计数器,并利用`v-model`指令动态绑定它们的值。当计数器的值发生变化时,会触发`change`事件,我们可以在事件处理函数中获取指定计数器的值。
阅读全文