可以使用 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
数组。最终,我们在模板中显示已选中的项。