最近需要用到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. Git --05 Gitlab使用

    目录 Gitlab使用 01. 外观配置 02. Gitlab汉化配置 03. 注册限制 04. 创建用户及组 05. 创建用户 06. 把用户添加到组 07. 创建项目 08. 推送代码到Gitla ...

  2. Java与C++对比

    Java的优势 Java是纯面向对象的,能够反映一切生活中的对象,编写程序更为容易. 平台无关性,“一次编译,到处运行”.(面试:为什么? 因为Java对每种数据类型分配的长度是固定的,但C++不是) ...

  3. pwn的一些技巧与总结

    原文地址:https://github.com/Naetw/CTF-pwn-tips 目录 溢出 在gdb中寻找字符串 二进制服务 找到libc中特定函数的偏移地址 Find '/bin/sh' or ...

  4. C++ 从txt文本中读取map

    由于存入文本文件的内容都为文本格式,所以在读取内容时需要将文本格式的内容遍历到map内存中,因此在读取时需要将文本进行切分(切分成key和value) 环境gcc #include<iostre ...

  5. windows H2database 安装

    转载百度经验 H2是一个开源的.纯java实现的关系数据库,小巧并且使用方便,十分适合作为嵌入式数据库使用 首先打开浏览器进入H2官网http://www.h2database.com/html/ma ...

  6. Maven 错误: Unknown lifecycle phase ".sourceforge.javacsv". You must specify a valid lifecycle phase or a goal

    这是在Win10系统下,将Jar包手工导入进Maven本地仓库,使用PowerShell执行命令报的错. 命令如下: mvn install:install-file -Dfile=E:\Worksp ...

  7. JSP和selevt 生命周期详解（JSP的生命周期和select很像，jsp底层就是一个selevt）

    JSP: JSP的生命周期指从创建到销毁的整个过程.分为以下几个阶段: 1:编译阶段:servlet引擎编译servlet源文件,生成servlet类.当浏览器请求JSP页面时,JSP引擎会首先去检查 ...

  8. 生成100个 "20180520" 这样的时间字符串 写入txt文件

    主要想记录一下 . 写NSString 到txt . 数组的去重 . 数组的截取 . 数组分割 代码如下: NSString *year = @"2018"; NSArray *m ...

  9. 4412 GPIO读 和 ioremap控制GPIO寄存器

    一.配置GPIO读 在视频14的基础上做 1.利用拨码开关来实现GPIO输入 所以AP_SLEEP对应GPC0_3,然后在drivers/gpio/gpio-exynos4.c中对应EXYNOS4_G ...

  10. JS中的作用域及闭包

    1.JS中的作用域 在 es6 出现之前JS中只有全局作用域和函数作用域,没有块级作用域,即 JS 在函数体内有自己的作用域,但是如果不是在函数体的话就全部都是全局作用域.比如在 if.for 等有 ...