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的方式实现复选框的更多相关文章

  1. Vue el 使用el-checkbox-group复选框进行单选框操作

    el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂.重要的是@chage到我们 ...

  2. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  3. ~Vue实现简单答题功能,主要包含单选框和复选框

    内容 实现简单答题效果 环境 Vue,webpack(自行安装) 实现方式 页面将答题列表传递给调用组件,组件将结果返回给调用页面(其它模式也ok,这只是例子) ------------------- ...

  4. freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式

    今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

  5. 关于Unity中NGUI的Checkbox复选框、Slider滑动条和Button的6种触发回调事件的方式

    Checkbox复选框 1.创建一个NGUI背景Sprite1节点 2.打开NGUI---->Open---->Prefab Toolbar---->选择一个复选框节点,拖拽到背景节 ...

  6. 复选框批量删除操作-jquery方式

    1.首先在页面添加一个批量删除的按钮:<li class="btns"><input id="deleteSubmit" class=&quo ...

  7. CSS 美化复选框 - 无图片方式

    今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> < ...

  8. Vue复选框的全选

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  9. Vue表单输入绑定(文本框和复选框)

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

随机推荐

  1. .NETFramework:Encoding

    ylbtech-.NETFramework:Encoding 1.返回顶部 1. #region 程序集 mscorlib, Version=4.0.0.0, Culture=neutral, Pub ...

  2. WebService安全解决方案—简单握手协议

    具体方案如下图: 2.解决方案分析 A.SiteA每次向SiteB发送的请求参数都不一样,造成伪造者难以模仿和推敲里面的算法过程. B.伪造者获得了SayHelloRequest的数据,它向SiteB ...

  3. 【华为2016上机试题C++】最高分是多少

    [编程题] 最高分是多少 时间限制:1秒 空间限制:65536K 老师想知道从某某同学当中,分数最高的是多少,现在请你编程模拟老师的询问.当然,老师有时候需要更新某位同学的成绩. 输入描述: 输入包括 ...

  4. NYOJ6——喷水装置(一)

    喷水装置(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3  描述:现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以它 ...

  5. scrapy将爬取到的数据存入elasticsearch

    pip安装 elasticsearch-dsl的包, 是elasticsearch提供给python 的接口 if __name__ == "__main__": 这个用来调试,还 ...

  6. Android利用tcpdump抓包,用wireshark分析包。

    1.前言 主要介绍在android手机上如何利用tcpdump抓包,用wireshark分析包. android tcpdump官网: http://www.androidtcpdump.com/ t ...

  7. 转-eclipse管理多个workspace

    Eclipse作为Java开发中最常用的开发工具,大家都很熟悉了,但是,当你做过很多项目后你会发现你的eclipse的package explorer视图下显示的project超级多,这时你可能会关闭 ...

  8. Could not open logfile" occurred when run "datapatch -verbose"

    CAUSE Due to Bug 25459405 - DATAPATCH FAILS WITH SP2-0768 IF NLS_LANGUAGE IS NOT SET TO AMERICANwhic ...

  9. asp.net 线程批量导入数据,ajax获取执行状态

    最近做了一个批量导入功能,长时间运行,没个反馈状态,很容易让人看了心急,产生各种臆想!为了解决心里障碍,写了这么个功能. 通过线程执行导入,并把正在执行的状态存入session,既共享执行状态,通过a ...

  10. C#将excel数据按照需求导入Sql server遇到的问题(参考而已)

    1.千万不要使用永中表格(WPS没用过,这里只是个人观点,不是说永中表格的) 我在公司得到的任务是将excel数据按照需求导入数据库总共主表大概3张,所以有点复杂(列子用的简单表,公司东西还是不要放出 ...