vue使用vant中的checkbox实现全选功能


Posted in Vue.js onNovember 17, 2020

本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码,供大家参考,具体内容如下

<template>
 <div class="visiblePeople">
 <topbar />
 <ul class="list clear_float">
 <li v-for="(item, index) in people" :key="index">
 <van-checkbox
  v-model="item.flag"
  class="listli"
 ></van-checkbox>
 <div class="right">
  <p>{{ item.name }}</p>
  <p>{{ item.id }}</p>
 </div>
 </li>
 </ul>
 <div class="bottom">
 <div class="left">
 <van-checkbox v-model="allcheck" class="all">全选</van-checkbox>
 </div>
 <button @click="jump">确定</button>
 </div>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
 people: [
 { id: "002", name: "陈阳", flag: true },
 {
  id: "003",
  name: "王苗苗",
  flag: true,
 },
 {
  id: "004",
  name: "张梁俊",
  flag: true,
 },
 {
  id: "005",
  name: "刘路",
  flag: true,
 },
 ],
 };
 },
 methods: {
 //点击确定后跳转回新增合同页面
 jump() {
 this.$router.push("/addContract");
 },
 //单选按钮切换
 // change(index) {
 // this.people[index].flag = !this.people[index].flag;
 // console.log(this.people[index].flag);
 // },
 },
 computed:{
 allcheck:{
 get(){
 //取值
 //every方法,数组中每一项都满足一个条件返回true
 return this.people.every(item=>item.flag)
 },
 set(newValue){
 //设置值
 console.log('触发set方法')
 this.people.map(item=>item.flag=newValue)
 }
 },
 filterAll(){
 return this.people.filter(item=>item.flag).length
 },
 count(){
 let checkedList=this.people.filter(item=>item.flag)
 return checkedList.length.reduce((total,item)=>{
 return total+item.num
 },0)
 }
 }
};
</script>
<style lang="less" scoped>
.list {
 background: #f8f9fb;
 height: 574px;
 li {
 height: 56px;
 margin: 10px 0 10px 0;
 float: left;
 img {
 width: 19px;
 height: 19px;
 float: left;
 margin: 13px;
 &.on {
 display: block;
 }
 &.off {
 display: none;
 }
 }
 .listli {
 float: left;
 margin: 19px 13px 0 13px;
 }
 .right {
 float: left;
 background: #ffffff;
 width: 328px;
 height: 56px;
 padding: 0px 0 0 13px;
 box-sizing: border-box;
 p:nth-of-type(1) {
 font-size: 15px;
 font-family: PingFang SC;
 font-weight: 400;
 color: #000000;
 line-height: 29px;
 }
 p:nth-of-type(2) {
 font-size: 13px;
 font-family: PingFang SC;
 font-weight: 400;
 color: #666666;
 line-height: 14px;
 }
 }
 }
}
.bottom {
 height: 50px;
 position: fixed;
 bottom: 0;
 .left {
 width: 237px;
 background: #ffffff;
 height: 100%;
 float: left;
 img {
 width: 18px;
 float: left;
 margin: 18px 13px 0 18px;
 &.on {
 display: block;
 }
 &.off {
 display: none;
 }
 }
 .all {
 margin: 17px 0 0 14px;
 }
 p {
 float: left;
 font-size: 13px;
 font-family: PingFang SC;
 font-weight: 400;
 color: #333333;
 margin-top: 18px;
 }
 }
 button {
 float: left;
 width: 138px;
 height: 50px;
 line-height: 50px;
 background: #336afa;
 color: #ffffff;
 }
}
</style>

本次遇到的问题是自己一开始没发现在people数组里面,定义的每一项flag的值设置的类型为字符串型即flag="true",导致一开始进入页面全部无论值为true还是false,复选框都是选中效果,修改之后便没有了此问题。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
You might like
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
JavaScript字符串对象
2017/01/14 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
金智子午JAVA面试题
2015/09/04 面试题
Ajxa常见问题都有哪些
2014/03/26 面试题
售后主管岗位职责
2013/12/08 职场文书
班主任班级寄语大全
2014/04/04 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书