用Vue的方式实现复选框

Posted 2021-11-29 yykong

var borrVm = new Vue({
        el: "#WingApp",
        data: {
　　　　　　　returnBookList：[],
            checked:"",
            checkList:[],
        },

在vue中定义两个属性

 methods: {
     checkAll: function () {
                if (this.checked) {
                    this.checkList = [];
                } else {
                    this.checkList = [];
                    for (var i in this.returnBookList) {
                        this.checkList.push(this.returnBookList[i]);
                    }
                }
            },
｝

定义这个方法，其中returnBookList是结果集

然后是全选复选框

<input type="checkbox" name="defualtAdd" id="sel_1" class="a-checkbox quanxuan" v-model="checked" @click="checkAll">

<！-- 这里如果没用过v-model可以先去了解一下vue -->

单选框
<input type="checkbox" name="defualtAdd" id="defualtAdd" class="a-checkbox qx" :value="item" v-model="checkList">

这些添加上使用起来就没什么问题了，如果有的话应该就是一些样式问题需要注意一下