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实现全选效果的更多相关文章

  1. vue实现全选框效果

    vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...

  2. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

  3. avalon全选效果分析讲解

    全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击 所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...

  4. vue中全选和取消

    1.效果预览 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. [原]vue实现全选,反选

    用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...

  6. vue分页全选和单选操作

    <!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...

  7. react 使用antd的多选功能做一个单选与全选效果

    一个小而简单的单选全选功能,其实官网已经给出效果了,不过是我多做了些复合用法 addorupdatemodal.jsx import React from "react"; imp ...

  8. vue实现全选,反选

    1.example.vue <template> <table class="table-common"> <tr> <th class= ...

  9. vue实现全选反选--简单使用

    最近需要用到vue的反选全选功能,于是就在网上找了一些代码实现,发现都不能够完美的实现.于是乎决定自己写出一套.经过一翻努力,完美了进行了实现.bug也已经修复完毕,希望能够帮助到大家!   < ...

随机推荐

  1. [HDUOJ1312]Red And Black (经典的DFS)

    Hot~~招聘——亚信科技,巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Red and Black Time Limit: ...

  2. Reverse Words in a String leetcode

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  3. iOS下的界面布局利器-MyLayout布局框架

      Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...

  4. 多个Activity交互的生命周期:

    一.多个Activity交互的生命周期: A Activity打开B Activity的时候:        A Activity                    B Activity     ...

  5. 基于C#的UDP通信(使用UdpClient实现,包含发送端和接收端)

    UDP不属于面向连接的通信,在选择使用协议的时候,选择UDP必须要谨慎.在网络质量令人十分不满意的环境下,UDP协议数据包丢失会比较严重.但是由于UDP的特性:它不属于连接型协议,因而具有资源消耗小, ...

  6. 修改mysql方法

    我已验证: 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('n ...

  7. Intellij Idea自动加载改动文件和自动自动热部署加载

    1:准备原料 我的Intellij Idea的版本是15. 之后tomcat自动加载修,你只需要在浏览器刷新一下页面即可. ************************************** ...

  8. mysql新建数据库时的collation选择(转)

    转自别处的文章.末尾附原文链接 mysql的collation大致的意思就是字符序.首先字符本来是不分大小的,那么对字符的>, = , < 操作就需要有个字符序的规则.collation做 ...

  9. CSS中的剪裁和遮罩

    剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...

  10. Realm数据库的简单介绍和使用

    给大家介绍一个数据库操作的框架Realm,本文主要以iOS 平台的使用场景为例. realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective-C和Swift)以及Android: ...