用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"> ...
随机推荐
- PYTHON XPath与lxml类库
XPath,我们可以用先将HTML文档转换成XML文档,然后用XPath查找HTML节点或元素. XML文档实例 HTML DOM模型示例 HTML DOM定义了访问和操作HTML文档的标准方法,以树 ...
- PostgreSQL新手教程
自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作系 ...
- iOS 中的 Block
参考:链接 (1)block作为本地变量(local variable) returnType (^blockName)(parameterTypes) = ^returnType(parameter ...
- LXD安装
#安装 #初始化(一路next) sudo lxd init #启动容器 lxc launch ubuntu:16.04 first #进到容器内 lxc exec first -- /bin/bas ...
- UVaLive 7461 Separating Pebbles (暴力)
题意:给出平面上的两类点,判断是否能画一条直线将两类点完全分割开来. 析:用暴力去枚举任意两点当作直线即可. 代码如下: #pragma comment(linker, "/STACK:10 ...
- 自定义HTML中select控件
HTML中默认的select控件比较难看,大家可以参考,本文提供一种解决思路,当然也可以用CSS实现. function selectInit(tid,isIn){ if(!$("#&quo ...
- E20180426-hm
transition n. 过渡,转变,变迁; [语] 转换; [乐] 变调 flip vt. 按(开关); 快速翻转; 急挥; n. 空翻; 浏览; (射击时枪管的) 跳跃; 轻抛; win ...
- hdoj3790 【最短路】
这一题啊,其实还是很简单的~(A掉了就很简单啊~) 思路: 松弛,然后在里面维护一个小最短路~: A掉这一题,感觉松弛的理解又上了一个台阶,以及spfa的原理,最短路用到的原理就是松弛,先把图构造到最 ...
- bzoj 3998: [TJOI2015]弦论【SA+二分||SAM】
SA的话t==0直接预处理出每个后缀的不同串贡献二分即可,然后t==1就按字典序枚举后缀,然后跳右端点计算和当前后缀的前缀相同的子串个数,直到第k个 不过bzoj上会T #include<ios ...
- Robotframework自动化系列:筛选结果数量统计
Robotframework自动化系统:筛选结果数量统计 上一个节点已经可以随机选中某一个下拉框的值,我们在使用evaluate随机数的时候需要计算下拉选项总数,这时候我们是手工计算输入的:这时候如果 ...