最近需要用到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. Codeforces Round #420 (Div. 2) - E

    题目链接:http://codeforces.com/contest/821/problem/E 题意:起初在(0,0),现在要求走到(k,0),问你存在多少种走法. 其中有n条线段,每条线段为(a, ...

  2. 基于vue的移动端web音乐播放器

    声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...

  3. python不能运行

    运行python文件出现,报错please select a valid interpreter 这是因为没有选择interpreter  就是更改目录时需要重新选择pytho解析器 解决方法如下 更 ...

  4. 重新调整动态vhdx占用的空间

    优化vhd:https://docs.microsoft.com/en-us/powershell/module/hyper-v/optimize-vhd?view=win10-ps 1. 弹出vhd ...

  5. 【Java】定义Logger为什么要用static和final？

    private static final Logger logger= LoggerFactory.getLogger(ShiroConfig.class); (1)出于资源利用的考虑,Logger的 ...

  6. JAVA(JDK,JRE)更改目录安装及环境变量配置

    重温一下 JAVA(JDK,JRE)更改目录安装及环境变量配置 https://jingyan.baidu.com/article/e2284b2b5b7ae5e2e7118d11.html 备注:随 ...

  7. 安卓Activity布局简述

    Activity布局简述 基于xml的布局 Main.xml(调用工程res/layout/main.xml定义的界面元素完成布局显示) <?xml version="1.0" ...

  8. [CSP-S模拟测试]:string（文艺平衡树）

    题目传送门(内部题60) 输入格式 第一行三个数$n,m,k$.第二行一个长度为$n$的串.接下来$m$行每行两个数$L_i$和$R_i$. 输出格式 一个串,表示字典序第$k$小的合法的能被填出的串 ...

  9. [CSP-S模拟测试73]题解

    A.小P的2048 作为一个看B哥玩了一个寒假的人这种题闭眼切好吧 模拟即可.程序模块化后直接复制粘贴. 说什么模拟不能复制粘贴的都没水平 #include<cstdio> #includ ...

  10. nginx中如何设置gzip（总结）

    nginx中如何设置gzip(总结) 一.总结 一句话总结: 真正用的时候,花一小点时间把gzip的各个字段的意思都看一下,会节约大量时间 直接gzip on:在nginx的配置中就可以开启gzip压 ...