vue实现checked 全选功能
记录一下
module.data = {
result: {}, items: []
//初始化全选按钮, 默认不选
,isCheckedAll: false
};
module.vue = new Vue({
el: moduleId,
data: module.data,
methods: {
CheckItem: function (item) {
console.log(item);//true
let idIndex = this.items.indexOf(item)
if (idIndex >= ) {
// 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
this.items.splice(idIndex, )
} else {
// 选中该checkbox
this.items.push(item)
}
console.log(this.items);
},
CheckAll: function () {
console.log(module.data.result.Data);
this.isCheckedAll = !this.isCheckedAll
if (this.isCheckedAll) {
// 全选时
this.items = []
this.result.Data.forEach(function (x) {
this.items.push(x.Id)
}, this)
} else {
this.items = []
}
console.log(this.items);
}
}
});
<input type="checkbox" id="qx" v-on:click="CheckAll()" />全选
<input type="checkbox" name="ck" v-on:click="CheckItem(x.Id)" :checked="items.indexOf(x.Id)>=0" :value="x.Id" />
vue实现checked 全选功能的更多相关文章
- vue中实现全选功能
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue ...
- 第八十二篇:Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
- Vue的全选功能实现思路
全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...
- 用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
- checked 全选 反选 示例
不多说看例子: 右上侧全选,然后每个栏又有一个栏目全选. 反选解决办法: function selectSubscibe(_class) { $("." + _class + &q ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- C# winform中的datagridview控件标头加入checkbox,实现全选功能。
/// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...
- jquery实现全选功能
主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
随机推荐
- 移动端遇到的bug (长期更新)
移动端遇到的bug border-radius和transform在一起的bug 当父级设置了border-radius+overflow:hidden的时候,圆角是可以包住子级的,这是个很常见的场景 ...
- mpvue的坑,持续更新-.-
mpvue... 坑 怎么说呢,去github看一下,发现还是有很多问题没有解决... 不支持filter 亲,到现在还没有支持filter哦.只能用替代方法了,用computed或者渲染前先处理数据 ...
- 组合数学入门—TwelveFold Way
组合数学入门-TwelveFold Way 你需要解决\(12\)个组合计数问题. \(n\)个有标号/无标号的球分给\(m\)个有标号/无标号的盒子 盒子有三种限制: A.无限制 B.每个盒子至少有 ...
- H3C保存当前配置--用户图示(console)以上
<H3C>save //此种保存只默认保存为Startup.cfg ,系统默认是加载此文件 The current configuration will be writte ...
- Linux环境下安装mysql(远程连接),zookeeper,java,tomcat.
环境阿里云centos7.5 64位 + FinalShell + Navicat Permium 12 用到的压缩包(版本看后缀) 注意:安装均在/usr/local目录下,下面代码中#号不要复制上 ...
- Linux 内核取消 urb
为停止一个已经提交给 USB 核心的 urb, 函数 usb_kill_urb 或者 usb_unlink_urb 应 当被调用: int usb_kill_urb(struct urb *urb); ...
- java 环境 笔记
1. 下载idea https://blog.csdn.net/yl1712725180/article/details/80309862 破解方法: 针对20 ...
- 盘一盘 Thread源码
线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 继承关系图 线 ...
- 关于python2和python3除法的区别
在Python2中,除法的取值结果取整数 >>> 9/2 4 而在Python3中,除法/的结果包含小数,如果只想取整数需要使用// >>> 9/2 4.5 > ...
- C++引用计数设计与分析(解决垃圾回收问题)
1.引言 上一篇博文讲到https://www.cnblogs.com/zhaoyixiang/p/12116203.html 我们了解到我们在浅拷贝时对带指针的对象进行拷贝会出现内存泄漏,那C++是 ...