Vue3：checkbox使用及限制选中数量

HTML：

<!--投票列表-->
<ul class="list f16">
  <li v-for="(list,index) in listData" :key="index" >
    <!--div @click="goAbout(list.orderid)">
      img :src="list.thumb"
      <span><i>编号：</i>{{list.orderid}}</span>
    </div-->
    <h6>姓名：{{list.tpname}}</h6>
    <p>票数：{{list.num}}</p>
    <label>
      <!--:value依要求绑定值的格式 比如:value="list.orderid+'_'+list.其他"-->
      <input type="checkbox" :value="list.orderid" v-model="checkGroup" @click="getCheck($event,list.orderid)">
      <b>已选中</b>
    </label>
  </li>
</ul>


<!--投票按钮-->
<div class="endButton" @click="checkVote">
  <button>提交投票</button>
  <div class="countNum" v-if="checkGroup.length > 0">请选择<b>3</b>个，已选择<b> {{checkGroup.length}} </b>个</div>
</div>

JS：

//必要的引入
import {getCurrentInstance,ref,watch} from 'vue';
const { proxy } = getCurrentInstance()


//选中数据
let checkGroup = ref([])


//选中 限制选中数量上限通过方法在选中时校验
const getCheck =(event,orderid)=>{
  //设置最多选择三个
  if(checkGroup.value.length < 3 && event.target.checked) {
    checkGroup.value.push(orderid)
  }else if(!event.target.checked){
    checkGroup.value.splice(checkGroup.value.indexOf(orderid),1)
  }else{
    event.target.checked = false
    //提示使用vantUi
    proxy.$toast({
      message: '已超出投票人数！',
      icon: 'warning',
    });
  }
}


//选中 限制选中数量上限用watch监听更方便
watch(()=>checkGroup.value,(newVal,oldVal)=>{
  if(newVal.length >3){
    proxy.$toast("已超出投票人数！")
    checkGroup.value.length = 3
  }
  console.log(newVal,oldVal)
})


//提交投票 限制选中数量下限在提交时校验
const checkVote=()=>{

  //设置至少选择三个
  if(checkGroup.value.length <3){
    proxy.$toast({
      message: '至少选择三个再投票',
      icon: 'warning',
    });
    return
  }

  //其他代码

    if ("提交成功") {
      //提示使用vantUi
      proxy.$toast({
        message: '投票成功！',
        icon: 'smile',
      });
      //清除checkGroup选中数据
      checkGroup.value = []
    } else {
      //提示使用vantUi
      proxy.$toast({
        message: response.data.info,
        icon: 'warning',
      });
      //清除checkGroup选中数据
      checkGroup.value = []
    }


  //其他代码


}

CSS：

/*列表样式*/
.list{display:flex;justify-content:space-between;flex-wrap:wrap;}
.list li{width:48%;background:#d71f18;border-radius:1vh;overflow:hidden;margin-top:2vh;color:#fff;text-align:center;padding-bottom:1vh;}
.list li div{position:relative;}
.list li span{display:block;position:absolute;left:1vh;bottom:1vh;background:rgba(0,0,0,0.6);padding:0 1.5vh 0 0;font-size:1.6vh;border-radius:1vh;overflow:hidden;color:#fff;}
.list li span i{display:inline-block;font-style:normal;background:#ac0006;padding:1vh 0 1vh 1vh;margin-right:1vh;}
.list li h6{padding:1.5vh 0 1vh 0;}
.list li p{padding:0 1vh;}
.list li label{display:block;background:#ffecd1;height:3.6vh;position:relative;border-radius:0.5vh;overflow:hidden;width:90%;margin:1.5vh auto 0 auto;}
.list li label:before{content:"\70b9\51fb\9009\4e2d";position:absolute;left:0;top:0;width:100%;text-align:center;color:#c0151b;line-height:3.8vh;}
.list li label input,.list li label input+b{display:none;}
.list li label input:checked+b{background:#ffcc00;display:block;position:absolute;left:0;top:0;width:100%;z-index:2;color:#c0151b;line-height:3.8vh;text-align:center;font-weight:normal;}
 
/*注意：
.list li label:before{content:"\70b9\51fb\9009\4e2d"}利用:before伪类显示默认文字，
为防止中文乱码情况将"点击选中"转为Unicode，
"点击选中"的Unicode码为：\u70b9\u51fb\u9009\u4e2d再伪类中使用需要将u去掉，如下：
content:"点击选中"转为content:"\70b9\51fb\9009\4e2d"
*/





/*底部按钮样式*/
.endButton{position:fixed;left:0;bottom:0;width:100%;background:#ac0006;z-index:5;padding:1vh 0 1.5vh 0;color:#fff;text-align:center;}
.countNum{padding-top:1vh;font-size:1.4vh;}
.endButton button{border:none;background:none;font-size:2.4vh;font-weight:bold;}

附：Vue3：radio循环及v-model选择绑定