vue全选和取消全选
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<div id="app">
<div v-for="list,index in lists">
<label :for="index">
{{list.name}}<input :id="index" type="checkbox" :value="list.name" v-model="checkboxArr"> //这里注意list.name这个值一定要和checkAll函数中绑定的红色的值要一样
</label>
</div>
<label>
<input type="checkbox" class="checkbox" @click="selectAll" />{{checkAllAddTxt}}
</label>
</div>
<script src="vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el: '#app',
data: {
checkboxArr: [],
lists: [{ // lists是从接口拿到的要遍历带有checkbox的数据
'name': ''
}, {
'name': ''
}, {
'name': ''
}, {
'name': ''
}],
checkAllAddTxt: '全选' // 作为全选 取消全选的显示文字
},
methods: {
selectAll: function (event) {
var _this = this;
if (!event.currentTarget.checked) {
this.checkboxArr = []; // 取消全选
this.checkAllAddTxt = '全选';
} else { // 实现全选
_this.checkboxArr = [];
_this.lists.forEach(function (list, i) {
_this.checkboxArr.push(list.name);
});
this.checkAllAddTxt = '取消全选';
}
}
}
});
};
</script>
</body> </html>
.
vue全选和取消全选的更多相关文章
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- bootstrap实现checkbox全选、取消全选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...
- JS对checkbox全选和取消全选
需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...
- react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...
- DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行
.net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下: 代码如下,有注解,相信大家都看得明白: ...
- js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...
- js全选与取消全选
实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...
- JS实现表单全选以及取消全选实例
实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...
- datagridview里面的checkbox全选和取消全选
全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...
随机推荐
- C语言算法
选择排序法:用第一个数分别和后面的数比较 冒泡排序法:相邻的两个数比较 01.单词首字母大写&统计单词个数 02: 编写一个函数int pieAdd(int n),计算1!+2!+3!+……+ ...
- hdu5396(区间DP)
题目意思: 给定一个表达式,运算符没有优先级,求不同顺序计算,所有可能的得到的结果之和. 由于运算符没有优先级,所以有多种顺序去计算,设d[i][j]表示[i,j]区间表达式通过不同顺序计算,所以可能 ...
- Cortex-M3 / M4 Hard Fault Handler （转载）
转自大伟的,感谢大伟的帮助调试:http://www.cnblogs.com/shangdawei/archive/2013/04/30/3052491.html http://blog.frankv ...
- UI： 网易新闻实现
#pragma mark-(AppDelegate.H文件)-------------------------------------------------------------------- ...
- webpack -v显示的版本与package.json的devDependencies节点显示的webpack版本不一致的问题
最近在学习webpack,遇到个奇葩的问题.就是安装完成webpack后,查看安装的webpack版本与package.json中显示的版本不一致, webpack是局部安装的,非全局安装, 命令1: ...
- 5950 Recursive sequence (矩阵快速幂)
题意:递推公式 Fn = Fn-1 + 2 * Fn-2 + n*n,让求 Fn; 析:很明显的矩阵快速幂,因为这个很像Fibonacci数列,所以我们考虑是矩阵,然后我们进行推公式,因为这样我们是无 ...
- [Swift]编程语言：文档修订历史
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Xposed 集成 Android 6.0.1环境中，总结
由于工作需要,需要将xposed集成到android源码中,生成新的ROM就自带xposed的功能. 下面大体上说一下步骤和遇到的问题. 1.下载,并编译android源码,成功. 2.下载 http ...
- hdu---------3189-------------------
水体一个,但是这种做题的方法值得发扬光大............ Just Do It Time Limit: / MS (Java/Others) Memory Limit: / K (Java/O ...
- NOI2018D2T1 屠龙勇士
安利一下松松松的OJ: 传送门 Description: 有N条巨龙, 对于每个龙含有\(a_i\)的生命, 你有N + M把砍刀, 其中M把是直接给你的, N把是杀死对应的巨龙才能获得的, 每把 ...