vue使用checkout实现单选

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，赋值
                }
            },
        }
    })