做一个简单的vue3语法糖全选

Vue 3 是一个流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。在Vue中，可以通过使用响应式数据和指令来创建各种UI组件和交互。全选功能是常见的交互之一，通常用于表格或列表选择多个条目。在Vue 3中，你可以使用计算属性(computed properties)和事件监听(event listeners)来实现全选功能。
下面是一个简单的Vue 3全选功能的实现示例：
<template>
<div>
<input type="checkbox" v-model="isAllChecked" @change="toggleAllCheckboxes"> 全选
<div v-for="(item, index) in list" :key="index">
<input type="checkbox" :value="item" v-model="selectedItems" @change="handleItemChange">
{{ item }}
</div>
</div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
setup() {
const list = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
const selectedItems = ref([]);

const isAllChecked = computed({
get() {
return selectedItems.value.length === list.value.length;
},
set(newValue) {
selectedItems.value = newValue ? list.value.slice() : [];
}
});

function toggleAllCheckboxes() {
selectedItems.value = isAllChecked.value ? [] : list.value.slice();
}

function handleItemChange() {
isAllChecked.value = selectedItems.value.length === list.value.length;
}

return {
list,
selectedItems,
isAllChecked,
toggleAllCheckboxes,
handleItemChange
};
}
};
</script>
登录后复制
在这个示例中，isAllChecked 是一个计算属性，它用来判断所有复选框是否都被选中。当全选复选框被改变时，toggleAllCheckboxes 方法会被触发，用于更新 selectedItems 的值，以此来切换所有条目的选中状态。同时，当列表中的任何一个复选框状态改变时，handleItemChange 方法会被触发，用来同步更新全选复选框的状态。