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的mixin策略
Nov 19 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
Javascript函数的参数
2015/07/16 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python3中的md5加密实例
2018/05/29 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python内置函数locals和globals对比
2020/04/28 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
合作协议书
2014/04/23 职场文书
大学活动总结范文
2014/04/29 职场文书
挂靠协议书
2015/01/27 职场文书
《火烧云》教学反思
2016/02/23 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python