多种思路,用最简单的方式写逻辑

如图所示,后端返回的数据列表接口,有一个功能单选与反选功能,不需要留存数据所以也就不需要后端的帮助.我当时第一反应是给数据列表中循环加一个标识符,为false,每次点击就将数据的标识符改为true. 后来老大哥说你为什么要循环 然后最后用的时候再循环取出列表id呢,为什么不直接存id?

所以思想不能局限性. 定义一个数组,用来保存选中的id,在页面中用includes来判断是否包含id.

单个数据的时候就只需要判断在数组中是否存在该id,存在添加,不存在就删除.

顶部全选的时候就是将选中数组重新赋值.

// 定义选中数组
selectIds: [],
// 数据列表
arrList:[],

// 单个修改商品的是否选中
handChangeIds(id){
    let _selectIds = this.selectIds;
    if(_selectIds.includes(id)){
        _selectIds.splic(_selectIds.indexOf(id,1));//查找下标并删除
    } else {
        _selectIds.push(id);
    }
    this.selectIds = _selectIds;
}

// 顶部全选/全不选
handReassignIds(){
    let _selectIds = this.selectIds;
    let ids = this.arrList.map(item => item.id);
    if(_selectIds.length < ids.length){
        _selectIds = ids;
    } else {
        _selectIds = [];
    }
    this.selectIds = _selectIds;
}

页面中我是使用的图片代表switch开关

// 顶部switch
<image src="{{selectIds.length === arrList.length ? '打开的图片':'关闭的图片'}}" onClick="handReassignIds" />

// 单个switch
<div>
    <div v-for="item in arrList" :key="item.id" onClick="handChangeIds(item.id)">
        <image src="{{selectIds.includes(item.id) ? '打开的图片':'关闭的图片'}}" />
    </div>
</div>