v-for循环展示复选框名称,如何让其默认不选中
时间: 2023-11-27 12:55:11 浏览: 32
可以通过给`v-model`绑定一个空数组来实现默认不选中的效果。
例如,假设有一个包含多个选项的列表,需要展示复选框并默认不选中,可以这样写:
```html
<template>
<div>
<div v-for="item in items" :key="item.id">
<input type="checkbox" :value="item.id" v-model="selectedItems"> {{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' },
{ id: 3, name: '选项3' }
],
selectedItems: []
}
}
}
</script>
```
在上面的代码中,通过将`v-model`绑定到`selectedItems`数组,并且在组件初始化时将该数组设置为空数组,就能实现默认不选中的效果。当用户选中某个复选框时,对应的选项id会被添加到`selectedItems`数组中。