码迷,mamicode.com
首页 > 其他好文 > 详细

用Vue的方式实现复选框

时间:2019-05-13 12:26:09      阅读:571      评论:0      收藏:0      [点我收藏+]

标签:fun   []   定义   span   问题   new   val   eth   注意   

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


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

用Vue的方式实现复选框

标签:fun   []   定义   span   问题   new   val   eth   注意   

原文地址:https://www.cnblogs.com/yyKong/p/10855786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!