,可以通过以下步骤实现:
data() {
return {
selectedCheckboxes: []
}
}
v-model
指令将复选框与数据属性绑定,以便实时更新选中的复选框的值:<input type="checkbox" value="checkbox1" v-model="selectedCheckboxes">
<input type="checkbox" value="checkbox2" v-model="selectedCheckboxes">
<input type="checkbox" value="checkbox3" v-model="selectedCheckboxes">
v-for
指令遍历选中的复选框的值,并为每个值创建一个容器:<div v-for="checkboxValue in selectedCheckboxes" :key="checkboxValue">
<!-- 在这里添加容器的内容 -->
</div>
完整的示例代码如下:
<template>
<div>
<input type="checkbox" value="checkbox1" v-model="selectedCheckboxes">
<input type="checkbox" value="checkbox2" v-model="selectedCheckboxes">
<input type="checkbox" value="checkbox3" v-model="selectedCheckboxes">
<div v-for="checkboxValue in selectedCheckboxes" :key="checkboxValue">
<!-- 在这里添加容器的内容 -->
<p>选中的复选框值:{{ checkboxValue }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedCheckboxes: []
}
}
}
</script>
这样,每次选中或取消选中复选框时,VueJS会自动更新selectedCheckboxes
数组的值,并根据选中的复选框的值动态生成相应的容器。你可以根据实际需求在容器中添加任何内容。
领取专属 10元无门槛券
手把手带您无忧上云