用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"> ...
随机推荐
- 微信小程序开发之https从无到有
本篇不讲什么是https,什么是SSL,什么是nginx 想了解这些的请绕道,相信有很多优秀的文章会告诉你. 本篇要讲的在最短的时间内,让你的网站从http升级到https. 开始教程前再说一句:ht ...
- ML 徒手系列说明
徒手系列正确打开方式: 1.徒手撸公式 2.徒手撸代码
- Mac下的常用终端命令与vim常用命令
因为很少用命令行,老被鄙视,所以今天记录一下常用的命令行: cd 切换工作目录 . 表示当前目录 .. 表示当前目录的上一级目录 / 根目录/目录分隔符 ./ 当前目录 ../ 回到上一级目录 ls ...
- 51nod 1344 【前缀和】
思路:求一下最小负数的前缀和 #include<cstdio> #include <map> #include<iostream> #include<stri ...
- Codeforces626B - Cards【模拟】
题意: 两张相同可以合并成相同: 两张不同可以产生另外一个不同: 求最终的可能颜色: 思路: 模拟啊. 总共也就那么几种情况,具体看挫code--. #include<iostream> ...
- 洛谷 P3960 列队【线段树】
用动态开点线段树分别维护每一行和最后一列,线段树的作用是记录被选的点的个数以及查询第k个没被选的点,每次修改,从行里标记被选的点,从最后一列标记向左看齐之后少的点,然后用vector维护行列的新增点 ...
- IDEA thymeleaf ${xxx.xxx}表达式报错,红色波浪线
解决方法: 在<!DOCTYPE html>标签下面加上 <!--suppress ALL--> 代码如图: 不再报错,效果如下图:
- Beta版本冲刺第三天!
该作业所属课程:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 作业地址:https://edu.cnblogs.com/c ...
- 4-redis数据过期策略
1 基本 redis也许只是用来存放临时数据.比如股市行情.游戏中一个持续一个月的活动等,都属于缓存数据,过了一段就没用了.如果没有过期策略,就会有大量垃圾数据在内存中堆积. 2 TTL time t ...
- Hdu 4513 吉哥系列故事——完美队形II (manacher变形)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4513 题目描述: 打完题目描述了,点开题目,发现题目是中文,orz.jpg.果断又删掉了,习惯真可怕 ...