用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"> ...
随机推荐
- http查看工具
View HTTP Request and Response Header Web-Sniffer Desktop App Please check our new free Web-Sniffer ...
- python-day9-进程、线程、协程篇
python threading模块 线程有两种调用方式: 直接调用 import threading import time def sayhi(num): #定义每个线程要运行的函数 print( ...
- bzoj5073
dp 字符串dp不太会啊... 这种序列和子串的匹配一般设两个状态,dp[i][j]表示当前s匹配到i,t匹配到j的...,g[i][j]表示当前s匹配到i,t匹配到j,i,j必须匹配的...,noi ...
- 创建纯文本Banner
场景: 最近再学习Spring Boot的过程中,想要自定义一个Banner,就是再工程启动是输出的那个文本图案,但是自己拼写既麻烦又不好看,所以找到一个工具,自动输出文字代表的纯文本Banner,例 ...
- 3、HTML的body内标签1
一.特殊符号的表示 #代指空格 < #代指,< > #代指,> ...... #这玩意有很多,记也记不完,用的时候查一下即可: 二.p和br标签 <p>< ...
- (水题)洛谷 - P1996 - 约瑟夫问题 - 链表
https://www.luogu.org/problemnew/show/P1996 试了一下数组实现的双向链表,是挺难用的,估计是应该写个get_next()函数比直接用next数组好. #inc ...
- poj 3415 Common Substrings【SA+单调栈】
把两个串中间加一个未出现字符接起来,然后求SA 然后把贡献统计分为两部分,在排序后的后缀里,属于串2的后缀和排在他前面属于串1的后缀的贡献和属于串1的后缀和排在他前面属于串2的后缀的贡献 两部分分别作 ...
- IT兄弟连 JavaWeb教程 HTTP协议
超文本传输协议(HTTP,Hypertext Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的Web文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...
- java高分局之jstat命令使用
S0C S1C S0U S1U EC EU OC OU MC MU CCSC CCSU YGC ...
- N Queen Again LightOJ - 1061
N Queen Again LightOJ - 1061 首先预处理(或打表)出所有八皇后的解法(只有92种).然后枚举目标状态,对于每一个目标状态用一个状压dp求出到达那个状态的最小费用.到达任何一 ...