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. Android Studio自动生成带系统签名的apk

    介绍签名的两种方式: 1.signapk.jar命令行方式: 如果你需要开发一个带有系统权限的app,往往需要配置SharedUserId,比如: </pre><pre name=& ...

  2. CMake 手册详解(二十)

    SirDigit CMake 手册详解(二十) CMD#51: list 列表操作命令. list(LENGTH <list> <output variable>) list( ...

  3. 【旧文章搬运】Windows内核常见数据结构(线程相关)

    原文发表于百度空间,2008-7-24========================================================================== 线程是进程的 ...

  4. Caused by: Unable to load bean: type: class:com.opensymphony.xwork2.ObjectFactory - bean - jar

    转自:https://blog.csdn.net/u011422744/article/details/39851693 在SSH开发,搭建环境的时候,启动tomcat服务器,就报这个异常! 信息: ...

  5. word-break: break-all word-break:keep-all word-wrap: break-word三者的区别

    word-break属性:指定非CJK脚本的断行规则. 值 描述 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空格或连字符处换行. w ...

  6. 基于puppeteer的网络拦截工具flyover

    为什么需要网络拦截工具 通常我们会遇到这样的场景: 线上一个图片有异常,线下修正之后需要发布之前进行测试,有些情况下,QA同学有直接在线上环境测试的需求,只是链接本地资源,通常在windows下有一个 ...

  7. Gradle系列之三 Gradle概述以及生命周期

    1 Gradle是一种编程框架 gradle主要由以下三部分组成 1 groovy核心语法 2 build script block 3 gradle api 注:本章所有的代码都在 https:// ...

  8. HDU 4542 小明系列故事——未知剩余系 (数论|反素数)

    分析 kuangbin的blog已经讲的很好了,我做一点补充 1.当做x*y>z的比较时,如果x \(\ast\) y过大,可以写成x>z/y 2.分解质因数时选择用f[][0]保存质数, ...

  9. hdu5443 【线段树】

    题意: 略 思路: 暴力是可以的O(1e7),这里采用线段树,线段树区间查找O(logn) #include<stdio.h> #include<string.h> #incl ...

  10. Codeforces645C【二分】

    题意: 给你一个序列,0表示空,1表示非空 你需要填k+1个位置,然后找出某一点到其他所有点都是最近的,然后输出一个最近的情况的最远点. 思路: 哎,好菜哦...不会写这个二分... 遍历每个可取的位 ...