可以使用 v-bind 和 v-on 指令结合 checked 属性来实现不使用 v-model 的复选框列表。以下是一个示例:
不使用 v-model 的复选框列表
-
已选中的项:{{ selectedItems }}
new Vue({
el: '#app',
data() {
return {
items: [
{ id: 1, label: '选项1' },
{ id: 2, label: '选项2' },
{ id: 3, label: '选项3' }
],
selectedItems: []
};
},
methods: {
toggleItem(label) {
if (this.selectedItems.includes(label)) {
this.selectedItems = this.selectedItems.filter(item => item !== label);
} else {
this.selectedItems.push(label);
}
}
}
});
在上述代码中,我们使用 v-for 指令遍历 items 数组来生成复选框列表。通过 :checked 属性和 selectedItems 数组判断是否选中复选框,并通过 @change 事件监听复选框的改变,调用 toggleItem 方法来改变 selectedItems 数组。最终,我们在模板中显示已选中的项。