html代码
<template v-for="(item,key) in uList" :key="item.id">
<tr>
<td class="project-title">
<font><input type="checkbox" class="CheckBoxClass" v-model="checkUid" :value="item.id" @change="checkedUid"></font>
</td>
<td class="project-title">
<font>{{item.id}}</font>
</td>
</tr>
</template>
js代码
在这里插入代码片
```new Vue({
el: '#app',
data: {
uList: [
{id:1}
], //用户列表弹框的用户数据
checkedU: false, //用户列表弹框的勾选
checkUid:[],
},
methods: {
//用户单选
checkedUid: function () {
this.checkUid = [];
if ($(event.target).prop("checked") == false) { //判断当前对象为不选中
$(event.target).prop("checked", false); //去除当前对象的选中状态
} else { //判断当前对象为选中状态
$(".CheckBoxClass").each(function () { //通过循环CheckBox的class所有CheckBox均不选中
$(this).prop("checked", false);
});
$(event.target.value).prop("checked", true); //设置当前对象选中(因为在上面循环时把当前的状态变为不选中)
this.checkUid[0] = event.target.value; //将选中的id,赋值
}
},
}
})