最近需要用到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. shell将当前目录下所有的.txt文件更名

  2. Kotlin搞起来——2.基础知识

    在上一节中简单的给大家介绍了下Kotlin的特点,以及结合自己实际项目 中的使用来帮助大家了解这门语言,其实真的没你想象中的那么难,本文打算 介绍的是Kotlin中基础相关的一些语法(用法),有个大概 ...

  3. redis还要做

    RedisTemplate对各种数据类型的操作记录. Redis深度历险:核心原理和应用实践 https://www.cnblogs.com/kismetv/p/8654978.html

  4. NotePad++安装compare插件(两个文件对比功能)

    首先百度搜索“notepad compare”,找到“Notepad++ Compare plugin download | SourceForge.net”,SourceForge提供了一个Comp ...

  5. mapreduce图解系列

    1.Hadoop的hdfs https://www.cnblogs.com/jstarseven/p/7682293.html 2.Hadoop的yarn https://segmentfault.c ...

  6. win7系统下IIS7.5配置MVC5环境注意事项与CentOS的MVC5设置

    注意事项: 1.IIS程序应用池更换为4.0net集成 2.网站目录加入IIS帐号的权限(基本设置里是administrators组帐号)注:服务器拒绝时是这里的问题 3.在“ISAPI和CGI限制” ...

  7. Joyoshare HEIC Converter for Mac将HEIC照片转换成其他格式的方法

    如何把HEIC格式的照片转换成其JPEG,PNG,GIF他格式呢?使用Joyoshare HEIC Converter for Mac破解版就可以,Joyoshare HEIC Converter是可 ...

  8. SQL查看所有表的大小

    --查看所有表的大小 declare @id int ) declare @pages int declare @dbname sysname ,) ,) ,) create table #spt_s ...

  9. 图与例解读Async/Await

    JavaScript ES7的async/await语法让异步promise操作起来更方便.如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调.然而使用 ...

  10. JavaScript 类型浅解

    对于JavaScript 类型,可简单地概括为:相对于强类型语言来说,它是弱(松散)类型的语言:有基本类型和引用类型,他们是区别是一个有固定空间存在于栈内存中,一个没有固定空间保存在堆内存中并且在栈内 ...