vue多个勾选框并排一行,勾选后进行选值
时间: 2023-06-30 11:24:25 浏览: 147
你可以使用 v-for 指令来循环渲染多个勾选框,并通过绑定一个数组来存储勾选的值。下面是一个简单的示例代码:
```
<template>
<div>
<div v-for="(item, index) in options" :key="index">
<input type="checkbox" :id="`checkbox${index}`" :value="item.value" v-model="selectedOptions">
<label :for="`checkbox${index}`">{{ item.label }}</label>
</div>
<p>已选项:{{ selectedOptions }}</p>
</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 指令循环渲染每个勾选框,并将其绑定到 selectedOptions 数组上,这样勾选的值就会被存储到 selectedOptions 中。最后,我们在页面上展示已选的项,方便用户查看。
需要注意的是,勾选框的 id 属性和 label 的 for 属性需要使用动态绑定,以确保每个勾选框和对应的文字标签能够正确关联。
阅读全文