最近需要用到vue的反选全选功能，于是就在网上找了一些代码实现，发现都不能够完美的实现。于是乎决定自己写出一套。经过一翻努力，完美了进行了实现。bug也已经修复完毕，希望能够帮助到大家！
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.1/axios.js"></script>
</head>
<body>
<div id="dd">
<button @click="checkAnti">反选</button>
<button @click="checkAll">全选</button>
<button @click="checkNone">全不选</button>
<table>
<tr v-for="l in list">
<td><input type="checkbox" class="cd" checked="checked" :value="l" v-model="ck"></td>
</tr>
</table>
<span v-text="new Date().getTime()"></span>
{{da}}
{{ck}}
</div>
<script type="text/javascript">
var s = new Vue({
el:"#dd",
data:{
list:[10,22,3,4,5,69,70],
ck:[],
ss:"2019-05-26",
da:new Date("2019-08-12").getTime()
},
methods: {
checkNone() {
this.ck=[]
},
checkAll() {
this.ck=[]
is=this;
this.list.forEach(i=>{
is.ck.push(i)
})
},
checkAnti() {
is = this;
this.list.forEach(item => {
if(is.ck.indexOf(item)!=-1){
is.ck.splice(is.ck.indexOf(item),1);
}else{
is.ck.push(item)
}
})
}
}
})
</script>
</body>
</html>

vue实现全选反选--简单使用的更多相关文章

  1. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

  2. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  3. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  4. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  5. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 关于input全选反选恶心的异常情况

    上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...

  7. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  9. BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

随机推荐

  1. 265-Keystone II JESD204B 66AK2L06 评估模块 (现行) XEVMK2LX

    Keystone II JESD204B 66AK2L06 评估模块 (现行) XEVMK2LX 一. 板卡概述The XEVMK 2LX is a full-featured evaluation ...

  2. hdu1210Eddy's 洗牌问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1210 Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如 ...

  3. 一、Angular环境的搭建

    1.安装nodejs (1) 下载网址https://nodejs.org/en/download/ (2) 双击进行安装 (3) 打开命令行,输入node -v 和 npm -v 查看是否安装成功 ...

  4. 再谈lmbench

    摸了一轮ltp-ddt 再回头来看lmbench bandwidth & latency合集小王子 用起来确实方便. 只是官网显示的用法是: Go to the top directory, ...

  5. bzoj2669 [cqoi2012]局部极小值 状压DP+容斥

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2669 题解 可以发现一个 \(4\times 7\) 的矩阵中,有局部最小值的点最多有 \(2 ...

  6. ThinkPHP import 类库导入 include PHP文件

    ThinkPHP 模拟了 Java 的类库导入机制,统一采用 import 方法进行类文件的加载.import 方法是 ThinkPHP 内建的类库和文件导入方法,提供了方便和灵活的文件导入机制,完全 ...

  7. 苹果正制造一款疯狂的“16K”VR耳机，效果到底有多牛？

    苹果一直以来都有传闻称正在研发一副增强现实眼镜,但今天的一份报告显示,他们希望在虚拟现实领域与Google,微软和Facebook竞争. 据CNET报道,苹果公司着眼于2020年发布的将AR和VR技术 ...

  8. 10.Servlet简单介绍

    1.什么是Servlet * Servlet是javaweb的三大组件之一,它属于动态资源.Servlet的作用是处理请求,服务器会把接收到的请求交给Servlet来处理,在Servlet种通常需要: ...

  9. springboot redis操作

    redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...

  10. The Constructor with No Arguments

    If a class supplies at least one constructor but does not supply a no-argument constructor, it is il ...