用Vue的方式实现复选框

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">


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

posted @ 2019-05-13 11:42  啊茶丶  阅读(1132)  评论(0编辑  收藏  举报