用web写多个复选框 特点:复选框的checked属性与data配置项的属性(数组)进行绑定 形式:<input type="checkbox"name="movie" value="动作片”v-model:checked="multicheckbox"
时间: 2024-09-19 18:03:34 浏览: 16
在Web开发中,如果你想要创建多个复选框,并让它们的checked状态与数据配置项关联起来,你可以使用HTML的`<input>`标签配合Vue.js等前端框架的数据绑定特性。例如,使用Vue的`v-model`指令,你可以在模板文件中这样设置:
```html
<template>
<div>
<!-- 使用v-for循环遍历数据 -->
<label v-for="(item, index) in movies" :key="index">
<input type="checkbox"
name="movie"
value="{{ item.category }}"
v-model="multicheckbox[item.id]"
:data-id="item.id" /> {{ item.title }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
multicheckbox: {}, // 初始化一个空的对象来存储每个复选框的状态
movies: [
{ id: 1, title: '动作片', category: '动作' },
{ id: 2, title: '喜剧片', category: '喜剧' },
// 更多电影...
]
}
}
}
</script>
```
在这个例子中,`movies`数组包含了电影的信息,包括类别(category)。`v-model`绑定了`multicheckbox`对象的相应键值,`value`属性与电影的类别匹配,这样点击复选框时,对应的`multicheckbox`项会同步改变。