思路

1. 首先隱藏input預設勾選框
2. 通過繫結label標籤，設定label的樣式來設定勾選框

效果

程式碼

# html中input的checkbox定義，使用for迴圈建立多個checkbox並繫結到label上
<div class="tab_1" v-for="(i, index) in all_stu_ls">
    <input :id="index" class="tab_1_title" type="checkbox" :value="i['id']" v-model="check_box_ls">
    <label :for="index"
 
>{{i.stu_name}}</label>
</div>

# css中首先隱藏預設，再自定義設定label樣式

input[type=checkbox]{	# 隱藏預設樣式
    visibility: hidden;
}

input[type="checkbox"] + label::before {
    content: "\a0";  /*不換行空格*/
    display: inline-block;
    width: 5vw;  # 設定選框的寬度
    height: 5vw;  # 設定選框的高度
    margin-right: 4vw;
 
	# 選框距離label文字的距離
    margin-left: -2vw;	# 選框拒了左邊界的距離
    border-radius: 1vw;	# 選框的圓角屬性
    background-color: silver;
    text-indent: 0vw;
    line-height: 5.2vw;	# 涉及對鉤的位置
    vertical-align: 0vw;
}

input[type="checkbox"]:checked + label::before {
    content: "\2714";	# 選中時的樣式 \2713是較細的對鉤
    color
 
: #FFFFFF;		# 樣式的顏色
    background-color: yellowgreen;	# 選中的背景色
}

.tab_1 label{	# label字型的樣式
    width: 60vw;
    height: 16vw;
    font-family: PingFangSC-Regular;
    font-size: 4.3vw;
    color: #000000;
}

注意：1、其中的標籤，文字的大小，單位需要根據自己的需求調整。2、文中的註釋並不是使用html和css合法註釋，需要自己手動刪除。