请用element-ui和vue实现v-for循环el-checkbox-group 中的el-checkbox ,请用假数据配合具体代码实现
时间: 2023-12-02 14:03:57 浏览: 302
好的,我可以为您提供一个简单的例子,具体代码如下:
```html
<template>
<div>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :key="city.value" :label="city.label">{{ city.label }}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
checkedCities: [],
cities: [
{ value: 'Shanghai', label: '上海' },
{ value: 'Beijing', label: '北京' },
{ value: 'Guangzhou', label: '广州' },
{ value: 'Shenzhen', label: '深圳' },
{ value: 'Hangzhou', label: '杭州' }
]
}
}
}
</script>
```
这里使用了 element-ui 中的 `el-checkbox-group` 和 `el-checkbox` 组件,通过 `v-for` 循环遍历了 `cities` 数组,动态生成多个 `el-checkbox`,最终将选中的城市存储在 `checkedCities` 数组中。注意,这里的 `v-model` 绑定了 `checkedCities`,表示这是一个双向绑定的变量,可以读取选中的值,也可以设置选中的值。
阅读全文