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全选功能 ...
随机推荐
- [转]C#操作Memcached帮助类
在VS中安装Memcached,直接在NuGet下搜索Memcached,选择第一个进行安装: 服务端资源下载地址:https://pan.baidu.com/s/1gf3tupl 接下来开始写程序, ...
- 关于移动端弹层下的body滚动
关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...
- win10 uwp 商业游戏 1.1.5
本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...
- dotnet core 使用 CoreRT 将程序编译为 Native 程序
现在微软有一个开源项目 CoreRT 能通过将托管的 .NET Core 编译为单个无依赖的 Native 程序 这个项目现在还没发布,但是能尝试使用,可以带来很多的性能提升 使用 CoreRT 发布 ...
- 【GYM101409】2010-2011 ACM-ICPC, NEERC, Western Subregional Contest
A-Area and Circumference 题目大意:在平面上给出$N$个三角形,问周长和面积比的最大值. #include <iostream> #include <algo ...
- vue中的computed和watch区别
在vue.js官方文档中看到computed和watch获取全名的一个例子: var var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', ...
- codeforces 1183H 动态规划
codeforces 1183H 动态规划 传送门:https://codeforces.com/contest/1183/problem/H 题意: 给你一串长度为n的字符串,你需要寻找出他的最长的 ...
- codeforces 1185G1 状压dp
codeforces 1185G1. Playlist for Polycarp (easy version)(动态规划) 传送门:https://codeforces.com/contest/118 ...
- Mybase desktop7.3破解
1.Mybase Desktop 7.3 安装包 百度云链接: 链接:https://pan.baidu.com/s/1mWZ2_Qmkf6aAX9CYgrN12A 提取码:vjw7 2.破解包 百度 ...
- Django框架之中间件MiddleWare
Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django框架的健 ...