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 router安装及使用方法解析
Dec 02 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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实现懒加载的方法
2015/03/07 PHP
php技巧小结【推荐】
2017/01/19 PHP
php批量删除操作代码分享
2017/02/26 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
任意位置显示html菜单
2007/02/01 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
canvas的神奇用法
2017/02/03 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
openlayers实现地图测距测面
2020/09/25 Javascript
python实现图片批量压缩程序
2018/07/23 Python
Python实现FTP文件传输的实例
2019/07/07 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Python实现密码薄文件读写操作
2019/12/16 Python
python中tab键是什么意思
2020/06/18 Python
python中spy++的使用超详细教程
2021/01/29 Python
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
C#笔试题集合
2013/06/21 面试题
董事长职责范文
2013/11/08 职场文书
学生感冒英文请假条
2014/02/04 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
保险经纪人求职信
2014/03/11 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
500字作文之周记
2019/12/13 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Python中glob库实现文件名的匹配
2021/06/18 Python
Golang数据类型和相互转换
2022/04/12 Golang
python中 .npy文件的读写操作实例
2022/04/14 Python