vue实现全选效果
vue实现全选效果
接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的。
今天没事就顺手写了一个,感觉很简单,js代码也就十几行就实现了,废话不多说亮代码。
```
html
<div id='app' class='container'>
<input type="checkbox" name="" id="allId" v-model="allData.parCheck" @change="allSelect()">
<label for="allId">{{allData.text}}</label> {{allData.parCheck}}
<ul>
<li v-for="item in checkData">
<input type="checkbox" name="" @change="singleSelect()" v-model="item.isCheck" :id="item.id">
<label :for="item.id">{{item.value}}</label> {{item.isCheck}}
</li>
</ul>
</div>
js
var app = new Vue({
el: '#app',
data: {
allData: {
parCheck: false,
text: '全选'
},
checkData: [{
id: '1',
value: '香蕉',
isCheck: false
}, {
id: '2',
value: '苹果',
isCheck: false
}, {
id: '3',
value: '梨子',
isCheck: false
}, {
id: '4',
value: '菠萝',
isCheck: false
}, {
id: '5',
value: '西瓜',
isCheck: false
}]
},
methods: {
allSelect() {
var vm = this;
vm.checkData.forEach(item => {
item.isCheck = vm.allData.parCheck
})
},
singleSelect() {
var vm = this;
var selectData = vm.checkData.filter(item => {
return item.isCheck == true
})
selectData.length == vm.checkData.length ? vm.allData.parCheck = true : vm.allData.parCheck = false;
}
}
})
注:在此遇到一个坑vue2里面现在已经不允许将选择器绑定到html或body上了
vue实现全选效果的更多相关文章
- vue实现全选框效果
vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...
- jQuery实现全选效果【转】
这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...
- avalon全选效果分析讲解
全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击 所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...
- vue中全选和取消
1.效果预览 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- [原]vue实现全选,反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- vue分页全选和单选操作
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...
- react 使用antd的多选功能做一个单选与全选效果
一个小而简单的单选全选功能,其实官网已经给出效果了,不过是我多做了些复合用法 addorupdatemodal.jsx import React from "react"; imp ...
- vue实现全选,反选
1.example.vue <template> <table class="table-common"> <tr> <th class= ...
- vue实现全选反选--简单使用
最近需要用到vue的反选全选功能,于是就在网上找了一些代码实现,发现都不能够完美的实现.于是乎决定自己写出一套.经过一翻努力,完美了进行了实现.bug也已经修复完毕,希望能够帮助到大家! < ...
随机推荐
- [HDUOJ1312]Red And Black (经典的DFS)
Hot~~招聘——亚信科技,巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Red and Black Time Limit: ...
- Reverse Words in a String leetcode
Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...
- iOS下的界面布局利器-MyLayout布局框架
Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...
- 多个Activity交互的生命周期:
一.多个Activity交互的生命周期: A Activity打开B Activity的时候: A Activity B Activity ...
- 基于C#的UDP通信(使用UdpClient实现,包含发送端和接收端)
UDP不属于面向连接的通信,在选择使用协议的时候,选择UDP必须要谨慎.在网络质量令人十分不满意的环境下,UDP协议数据包丢失会比较严重.但是由于UDP的特性:它不属于连接型协议,因而具有资源消耗小, ...
- 修改mysql方法
我已验证: 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('n ...
- Intellij Idea自动加载改动文件和自动自动热部署加载
1:准备原料 我的Intellij Idea的版本是15. 之后tomcat自动加载修,你只需要在浏览器刷新一下页面即可. ************************************** ...
- mysql新建数据库时的collation选择(转)
转自别处的文章.末尾附原文链接 mysql的collation大致的意思就是字符序.首先字符本来是不分大小的,那么对字符的>, = , < 操作就需要有个字符序的规则.collation做 ...
- CSS中的剪裁和遮罩
剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...
- Realm数据库的简单介绍和使用
给大家介绍一个数据库操作的框架Realm,本文主要以iOS 平台的使用场景为例. realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective-C和Swift)以及Android: ...