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 ...
随机推荐
- 几个最短路径算法Floyd、Dijkstra、Bellman-Ford、SPFA的比较(转)
几大最短路径算法比较 几个最短路径算法的比较:Floyd 求多源.无负权边(此处错误?应该可以有负权边)的最短路.用矩阵记录图.时效性较差,时间复杂度O(V^3). Floy ...
- SPOJ:Fibonacci Polynomial(矩阵递推&前缀和)
Problem description. The Fibonacci numbers defined as f(n) = f(n-1) + f(n-2) where f0 = 0 and f1 = 1 ...
- Python进程、线程、协程的对比
1. 执行过程 每个线程有一个程序运行的入口.顺序执行序列和程序的出口.但是线程不能够独立执行,必须依存在进程中,由进程提供多个线程执行控制.每个线程都有他自己的一组CPU寄存器,称为线程的上下文,该 ...
- js函数定义 参数只要写名称就可以了
js函数定义 参数只要写名称就可以了 以下为标准: function add(type) { } 不要写成下面这个样子 function add(var type) { } 哎 妹的 老何ja ...
- 【137】Photoshop相关功能
1. photoshop中怎样批处理操作 图文教程 来源:http://www.jb51.net/photoshop/57784.html 不知道大家有没有接触过PS里面的批处理呢,当我们要完成数百张 ...
- A+B Problem——经典中的经典
A+B Problem,这道题,吸收了天地的精华,是当之无愧的经典中的经典中的经典.自古以来OIer都会经过它的历练(这不是白说吗?),下面就有我herobrine来讲讲这道题的各种做法. 好吧,同志 ...
- python包管理工具他们之间的关系
python包管理工具之间的关系 现在的python包管理工具有很多,非常混乱,必须理清他们之间的关系才能更好的使用python构建强大的包关系系统工具. 首先:python官方推荐的第三方库是PyP ...
- Poj 3294 Life Forms (后缀数组 + 二分 + Hash)
题目链接: Poj 3294 Life Forms 题目描述: 有n个文本串,问在一半以上的文本串出现过的最长连续子串? 解题思路: 可以把文本串用没有出现过的不同字符连起来,然后求新文本串的heig ...
- poj 1258 Agri-Net prim模板 prim与dijkstra的区别
很裸地求最小生成树的题目.题意就不多说了,最重要的就是记录一下学会了prim算法. 初学prim,给我的第一感觉就是和dijkstra好像啊,感觉两者的区别还是有的: 1:prim是求最小生成树的算法 ...
- ACM_绝对值
100块钱都不给我 Time Limit: 2000/1000ms (Java/Others) Problem Description: 今天是广财的ACM周赛,小光来到广财实验楼,想来蹭一下素拓分( ...