商城项目--全选,反选 vue2.x+JQ代码(俩种实现方式)
2017-09-15 15:53
645 查看
Hello 大家好我是杨小宝!最近刚刚接手公司内一个商城项目,里面一些业务逻辑其实学习与记录一下挺好的,如果你也正好做商城类似的项目,看一下我们有相同的问题吗?
首先这个全选,反选一开始做的时候我进入了一个盲区就是一直想判断 每一个checkbox选中的状态全等于true的时候 要 All => checkbox 在等于true。虽然看似很简单的一个逻辑缺让我想的很复杂!那一下看一下我们正确的代码以及逻辑思路把!
这里给大家做了一个小demo 当然数据还是按照 项目需要写的。
我先把vue中data数据单独写出来 然后看一下页面 先不写逻辑思路!
页面图:
Vue逻辑:
首先我们要考虑项目实现的需求跟业务逻辑:
1. 我们’商品’列表里面的数据都是’活’的 就是说 请求接口获取的数据
2. 当我们点击全选这个checkbox这个input要让下面四个input 全部选中,在次点击全部 不选中
3. 我们依次点击’商品’列表cheakbox当点击最后一个时候’全选’这个checkbox被选中
4. 当我们四个’商品’列表都被选中的时候 在点击其中一个 让全选的checkbox 成未false
一步步进入我们的VueJS代码:
大体的思路给大家整理了一下,很好理解的。接下来附上所有代码:
其实我还在考虑局部监听很全局监听$watch 有什么区别?? 本来就想写一个在写一个全部监听的,后来感觉没必要一个样。那么在送给大家同过JQ写的 代码 跟上面实现的效果一样!
我是杨小宝!一起努力学习vue2.x的知识吧!
首先这个全选,反选一开始做的时候我进入了一个盲区就是一直想判断 每一个checkbox选中的状态全等于true的时候 要 All => checkbox 在等于true。虽然看似很简单的一个逻辑缺让我想的很复杂!那一下看一下我们正确的代码以及逻辑思路把!
这里给大家做了一个小demo 当然数据还是按照 项目需要写的。
<script type="text/javascript" src="vue.js"></script> <body> <div id="box"> <div id="allbox"> <input type="checkbox" @click='all()' v-model='checkedAll'>全选</input> </div> <div v-for='list in Lists'> <input type="checkbox" :value='list.id' v-model='ischeckdate'>{{list.name}}</input> </div> </div> </body>
我先把vue中data数据单独写出来 然后看一下页面 先不写逻辑思路!
data:{ Lists:[ {id:1,name:'1111'}, {id:2,name:'2222'}, {id:3,name:'3333'}, {id:4,name:'4444'} ], checkedAll:'', // 这个checkedAll绑定的是全选input的v-model ischeckdate:[] // 用数组绑定 '商品'列表 input的v-model },
页面图:
Vue逻辑:
首先我们要考虑项目实现的需求跟业务逻辑:
1. 我们’商品’列表里面的数据都是’活’的 就是说 请求接口获取的数据
2. 当我们点击全选这个checkbox这个input要让下面四个input 全部选中,在次点击全部 不选中
3. 我们依次点击’商品’列表cheakbox当点击最后一个时候’全选’这个checkbox被选中
4. 当我们四个’商品’列表都被选中的时候 在点击其中一个 让全选的checkbox 成未false
一步步进入我们的VueJS代码:
//需求一二解决: //我们给全选一个点击事件,@click='all()' methods:{ all(){ var ischeckdate = []; if (this.checkedAll) { this.Lists.forEach((item)=>{ ischeckdate.push(item.id) }) } this.ischeckdate = ischeckdate; console.log(this.ischeckdate) } } // 这个判断 就是如果All选中了为true 那么循环 所有的'商品'列表 给我们的空数组添加对应的id,这里要注意一点'商品'列表中的value 必须要绑定我们对于的id值。
//需求三四解决: //我们用到了vue中的watch的监听api watch:{ ischeckdate:{ handler(newVal){ console.log(newVal) // 打开控制台查看我们的newVal值 if (this.Lists.length === this.ischeckdate.length) { this.checkedAll = true; }else{ this.checkedAll = false; } } } } // 这里的思路是,当我选中某一个'商城'列表后把对应的id传入我们一开始定义的空数组中ischeckdate然后我们判断我们所有的数据的长度是否跟我们的这个定义的空数组长度一致,如果一致那么全选为true,如果不一致那么false!!
大体的思路给大家整理了一下,很好理解的。接下来附上所有代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="box"> <div id="allbox"> <input type="checkbox" @click='all()' v-model='checkedAll'>全选</input> </div> <div v-for='list in Lists'> <input type="checkbox" :value='list.id' v-model='ischeckdate'>{{list.name}}</input> </div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#box', data:{ Lists:[ {id:1,name:'1111'}, {id:2,name:'2222'}, {id:3,name:'3333'}, {id:4,name:'4444'} ], checkedAll:'', ischeckdate:[] }, methods:{ all(){ var ischeckdate = []; if (this.checkedAll) { this.Lists.forEach((item)=>{ ischeckdate.push(item.id) }) } this.ischeckdate = ischeckdate; console.log(this.ischeckdate) } }, watch:{ ischeckdate:{ handler(newVal){ console.log(newVal) if (this.Lists.length === this.ischeckdate.length) { this.checkedAll = true; }else{ this.checkedAll = false; } } } } }) </script> </html>
其实我还在考虑局部监听很全局监听$watch 有什么区别?? 本来就想写一个在写一个全部监听的,后来感觉没必要一个样。那么在送给大家同过JQ写的 代码 跟上面实现的效果一样!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <p><input name="Fruit" type="checkbox" value="" /> 111</p> <p><input name="Fruit" type="checkbox" value="" /> 222</p> <p><input name="Fruit" type="checkbox" value="" /> 333</p> <p><input name="Fruit" type="checkbox" value="" /> 444</p> <p><input name="checkbox" type="checkbox" value="" class="btn-al btn" /> 全选</p> <!-- <p><input name="checkbox" type="checkbox" value="" class="btn-re btn" /> 反选</p> --> </body> <script type="text/javascript"> $(function(){ var $Input = $('input[type="checkbox"]').not('.btn'); // 反选 // $('.btn-re').on('click',function(){ // var bool = true; // $Input.prop('checked',function(index, value){ // return !value; // }); // $(this).prop('checked',false); // $Input.each(function(index, item){ // bool = bool && $(item).prop('checked'); // }); // if(bool){ // $('.btn-al').prop('checked', true); // }else{ // $('.btn-al').prop('checked', false); // } // }); // 全选 $('.btn-al').on('click',function(){ var bool = true; $Input.each(function(index, item){ bool = bool && $(item).prop('checked'); }); if(bool){ $Input.prop('checked',false); $(this).prop('checked',false); }else{ $Input.prop('checked',true); $(this).prop('checked',true); } }) // 单选 $Input.on('click',function(){ var bool = true; $Input.each(function(index, item){ bool = bool && $(item).prop('checked'); }); if(bool){ $('.btn-al').prop('checked', true); }else{ $('.btn-al').prop('checked', false); } }) }) </script> </html>
我是杨小宝!一起努力学习vue2.x的知识吧!
相关文章推荐
- vue2.0中vue-cli实现全选、单选计算总价格的实例代码
- 图片上传代码-旧的实现方式,项目中已删除,发表做备用
- JAVAWEB实现简单的商城项目(一)实例代码解析
- 菜鸟进阶--node+vue实现一个商城Demo(1):项目介绍
- vue项目base64字符串转图片的实现代码
- 图片上传代码-旧的实现方式,项目中已删除,发表做备用
- 图片上传代码-旧的实现方式,项目中已删除,发表做备用
- tab切换选项卡 (原生/jQ/vue) 实现方式
- 图片上传代码-旧的实现方式,项目中已删除,发表做备用
- vue项目tween方法实现返回顶部的示例代码
- 图的俩种遍历方式(DFS,BFS)C++代码实现
- 简单使用JQ代码 实现全选 反选 全不选 批删
- Android项目欢迎界面实现方式及代码
- vue 实现全选全不选的示例代码
- 应用J2EE构建项目登录方式的改进设计与实现
- 用代码实现为程序创建快捷方式的二种方法
- web 项目中的文件上传服务器的代码实现
- 网页刷新代码-刷新页面实现方式总结篇
- 应用J2EE构建项目登录方式的改进设计与实现
- 网页刷新代码-刷新页面实现方式总结篇