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. Crontab Build_setting的定期检查

    一.脚本功能 (1)检查所有的builting_setting.h是否能够编译通过,并将编译结果写入 编译结果.h文件中. (2)将编译结果通过邮箱发送给相关负责人. (3)系统定期执行任务,检查bu ...

  2. You can't specify target table 'xxx' for update in FROM clause

    1.执行sql语句报上面的错误: DELETE FROM db_student WHERE RowGuid IN ( SELECT RowGuid FROM db_student WHERE age ...

  3. Event Handling Guide for iOS--(二)---Gesture Recognizers

    Gesture Recognizers 手势识别器 Gesture recognizers convert low-level event handling code into higher-leve ...

  4. hibernate基础配置文件

    主配置文件 <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC " ...

  5. bash 脚本编程七 将命令输出保存到变量中(转载)

    转自:http://blog.csdn.net/csfreebird/article/details/7978699 `符号包含的命令执行完后,可以讲其输出结果保存到变量中 #!/bin/bash v ...

  6. js 回调函数

    一.前奏 在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果. function say (value) { alert(value);}alert(say);alert(say('hi ...

  7. hdoj1540 【线段树的表示】

    大牛blog 这题的题解写给自己看-- 总结(瞎扯一点): 之前只会思考,len,sum,然后GG,如果只是sum和len的去用的话,就是在mid的时候会GG.然后这次也是参考大牛的写法,其实还是蛮简 ...

  8. python __builtins__ bytes类 (8)

    8.'bytes', 字符串转换成字节流.第一个传入参数是要转换的字符串,第二个参数按什么编码转换为字节. class bytes(object) | bytes(iterable_of_ints) ...

  9. C++ multiset通过greater、less指定排序方式,实现最大堆、最小堆功能

    STL中的set和multiset基于红黑树实现,默认排序为从小到大. 定义三个multiset实例,进行测试: multiset<int, greater<int>> gre ...

  10. selenium中Xpath和CSS Selector的使用方法

    一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...