用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">
这些添加上使用起来就没什么问题了,如果有的话应该就是一些样式问题需要注意一下
用Vue的方式实现复选框的更多相关文章
- Vue el 使用el-checkbox-group复选框进行单选框操作
el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂.重要的是@chage到我们 ...
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- ~Vue实现简单答题功能,主要包含单选框和复选框
内容 实现简单答题效果 环境 Vue,webpack(自行安装) 实现方式 页面将答题列表传递给调用组件,组件将结果返回给调用页面(其它模式也ok,这只是例子) ------------------- ...
- freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式
今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...
- 关于Unity中NGUI的Checkbox复选框、Slider滑动条和Button的6种触发回调事件的方式
Checkbox复选框 1.创建一个NGUI背景Sprite1节点 2.打开NGUI---->Open---->Prefab Toolbar---->选择一个复选框节点,拖拽到背景节 ...
- 复选框批量删除操作-jquery方式
1.首先在页面添加一个批量删除的按钮:<li class="btns"><input id="deleteSubmit" class=&quo ...
- CSS 美化复选框 - 无图片方式
今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> < ...
- Vue复选框的全选
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue表单输入绑定(文本框和复选框)
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
随机推荐
- 构建Docker平台【第一篇】环境准备
主机信息 操作系统版本 CentOS-7-x86_64-Everything-1511 主机A 192.168.6.128 主节点 主机B 192.168.6.129 主节点 主机C 192.16 ...
- 中文环境下PostgreSQL的使用
虽然官方文档有提到编码的问题,但是对于中文讲的比较简单,给中文的PostgreSQL用户带来很多困扰,本文简单简述一下中文环境下PostgreSQL如何正确设置编码. 一.服务器端的编码设置 Post ...
- 【旧文章搬运】ZwQuerySystemInformation枚举内核模块及简单应用
原文发表于百度空间,2008-10-24========================================================================== 简单说,即 ...
- Codeforces34C【尺取】
题意: 输入一系列的数,连续数字则输出连续区间 看第一个案例就很明显 思路: 输入字符串输入,预处理一下. 写了个挫尺取- 贴一发挫code--. #include <bits/stdc++.h ...
- Codeforces731D 80-th Level Archeology
考虑将两个单词变成有序,我们可以得到一个或者两个旋转次数的区间. 然后考虑将两组单词变成有序,比如[l,mid]和[mid+1,r],对于mid和mid+1这两个单词我们可以求出使他们有序的旋转次数的 ...
- 第十六篇 .NET高级技术之序列化
.net framework的类库中提供了三个可以用于序列化和反序列化的类,分别为BinaryFormatter.SoapFormatter和XmlSerializer. BinaryFormatte ...
- hdu1829&&poj2492 A Bug's Life 基础种类并查集
把性别相同的虫子放在同一个集合,然后每读入一对虫子号,判断它们在不在同一集合,在则同性别,不在则继续 #include <cstdio> #include <cstring> ...
- nginx媒体压缩
1 gzip模块 参考:http://nginx.org/en/docs/http/ngx_http_gzip_module.html 浏览器的请求头里会表明Accept-Encoding 方式.服务 ...
- Alt+数字 输入特殊字符
前言: 按住Alt键不放,再按(小键盘的)数字键,然后放开就可以输入特殊字符. 起始 终止 字符类别 0 255 基本与ASCII 码表对应 42657 42680 大写希腊字母 ...
- win10下JDK安装,配置环境变量后报Error: could not open `C:\Program Files\Java\jre1.8.0_112\lib\amd64\jvm.cfg'
把Path里面的%JAVA_HOME%/bin放在最前面.