这是一个组件:

<template>
<div>
<div>
<input type="checkbox" v-model="isCheckAll" @change="checkedAll"> 全选/取消全选
<input type="checkbox" v-model="isCheckInverse" @change="checkedInverse"> 反选/取消反选
</div>
<div v-for="(list, index) in checkboxLists">
<input type="checkbox" v-model="checkedLists" :value="list.id"> {{ list.product_name }}
</div>
<div>全选/反选 状态:{{ isCheckAll }}</div>
<div>选中列表:{{ checkedLists }}</div>
</div>
</template> <script>
export default {
data () {
return {
// 总数据
checkboxLists: [
{
id: ,
product_name: '银手链'
},
{
id: ,
product_name: '银手镯'
},
{
id: ,
product_name: '银耳环'
}
],
// 是否全选
isCheckAll: false,
// 是否反选
isCheckInverse: false,
// 选中列表
checkedLists: []
}
},
methods: {
// 全选/取消全选
checkedAll () {
// 初始化反选/取消反选
this.isCheckInverse = false
// 判断 全选/反选 是否点击
if (this.isCheckAll) {
let arr = []
// 循环全部数据并push到一个数组中
this.checkboxLists.forEach(element => {
arr.push(element.id)
});
// 选中列表赋值,此时的arr已经是全部数据了,直接赋值就等于选中所有checkbox
this.checkedLists = arr
} else {
// 如果 全选/反选 为假,则选中列表初始化
this.checkedLists = []
}
},
// 反选/取消反选
checkedInverse () {
// 这里不能直接用this.xxx赋值,具体参考https://www.cnblogs.com/nonsec/p/9322359.html
let tempArr = JSON.parse(JSON.stringify(this.checkboxLists))
let arr = []
var obj = {} // 先循环已勾选的,赋值给对象,对象key和value都为勾选的值
for (const i in this.checkedLists) {
obj[this.checkedLists[i]] = this.checkedLists[i]
} // 循环总的,然后判断上面对象的属性是否存在,如果存在则加入数组
for (const j in tempArr) {
if (!obj.hasOwnProperty(tempArr[j].id)) {
arr.push(tempArr[j].id)
}
} // 最后赋值,实现反选/取消反选功能
this.checkedLists = arr
}
},
watch: {
// 监听选中列表属性,当选中列表发生变化时,会运行此方法
checkedLists (newValue, oldValue) {
// 每次运行时,判断当前选中列表中的数组个数是否等于全部数据的数组个数,如果到某一时刻全等,则全选按钮为选中
if (newValue.length === this.checkboxLists.length) {
this.isCheckAll = true
} else {
// 否则为全不选
this.isCheckAll = false
}
}
}
}
</script>

Vue 全选/取消全选,反选/取消反选的更多相关文章

  1. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

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

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

  3. js jqery判断checkbox是否选中,全选,取消全选,反选,选择奇数偶数项

    // 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...

  4. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  5. vue全选和取消全选

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  7. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  8. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  9. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

随机推荐

  1. Element upload组件上传图片与回显图片

    场景:新增商品时需要添加商品主图,新增成功之后可编辑 上传图片: <el-form-item label="专区logo:" style="height:160px ...

  2. Python爬虫(一)爬百度贴吧

    简单的GET请求: # python2 import urllib2 response = urllib2.urlopen('http://www.baidu.com') html = respons ...

  3. 201771030120-王嫄 实验一 软件工程准备 <课程学习目的思考>

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE 这个作业要求链接 https://www.cnblogs.com/nwnu- ...

  4. Android下拉刷新SwipeRefreshLayout简单用法

    之前一直都想用下拉刷新,感觉上是庞大的工程,所以搁置了.现在学习了一下其实真的超级简单. 看了<第一行代码>以及 https://www.jianshu.com/p/3c402a9e4b7 ...

  5. Day_12【集合】扩展案例2_键盘录入一个字符串,对其进行去重,并将去重后的字符串组成新数组

    需求分析:键盘读取一行输入,去掉其中重复字符, 打印出不同的那些字符 思路: 1.键盘录入字符串 2.遍历字符串,将每个字符存储到集合中 3.将集合中重复的字符去掉 4.创建新集合,遍历老集合,获取老 ...

  6. vue省市区三级联动(高仿京东)

    该栗子是我直接从公司的项目单独拉出来的(懒得重新写一次了),所以代码会有些冗余,下面直接看效果: 接着上代码: html: <template> <div> <div c ...

  7. [CodeForces 344D Alternating Current]栈

    题意:两根导线绕在一起,问能不能拉成两条平行线,只能向两端拉不能绕 思路:从左至右,对+-号分别进行配对,遇到连续的两个“+”或连续的两个“-”即可消掉,最后如果全部能消掉则能拉成平行线.拿两根线绕一 ...

  8. Spring Cloud认知学习(一):Spring Cloud介绍与Eureka使用

    目录 Spring Cloud的介绍 微服务的介绍 Spring Cloud出现的原因: 常见场景: 微服务的优劣势: Spring Cloud版本问题 版本介绍 与Spring Boot版本对应关系 ...

  9. Android 编译系统

    1,Makefile编译方式 TARGET: PREREQUISITES COMMANDS 1,TARGET是需要生成的目标文件,PREREQUISTIES代表了目标所依赖的所有文件. 2,简单的Ma ...

  10. java 四舍五入 保留n为数

    double x1 = 0.026;String format = String.format("%.2f", x1);System.out.println(format); St ...