vue 中 用v-for 遍历出来的复选框 v-modal 怎么赋值
时间: 2023-07-06 12:27:25 浏览: 108
vue中v-for循环选中点击的元素并对该元素添加样式操作
可以使用`v-model`指令来绑定一个变量来控制复选框的选中状态。具体的实现方式是在`v-model`中绑定一个布尔类型的变量,当复选框被选中时,这个变量的值就会被设置为`true`,否则就会被设置为`false`。以下是一个示例代码:
```html
<template>
<div>
<div v-for="(item, index) in options" :key="index">
<input type="checkbox" :value="item.value" v-model="selectedOptions">
<label>{{ item.label }}</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
],
selectedOptions: [],
};
},
};
</script>
```
在这个示例代码中,我们定义了一个`options`数组来存储复选框的选项,然后使用`v-for`指令遍历数组,生成多个复选框。在每个复选框中,我们使用`v-model`指令将`selectedOptions`变量绑定到复选框的选中状态上。最后,我们只需要在`data`中定义一个空数组来存储选中的选项即可。
阅读全文