,可以通过以下步骤实现:
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
数组的值,并根据选中的复选框的值动态生成相应的容器。你可以根据实际需求在容器中添加任何内容。
Elastic 实战工作坊
Elastic 实战工作坊
云+社区技术沙龙[第22期]
云+社区技术沙龙[第11期]
云+社区开发者大会 长沙站
云+社区技术沙龙第33期
云+社区技术沙龙[第27期]
云+社区沙龙online[新技术实践]
serverless days
领取专属 10元无门槛券
手把手带您无忧上云