好资源导航 » 文章资讯 » vue使用vant中的checkbox实现全选功能

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

2023-07-11 15:08:03 78

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





.list{
background:#f8f9fb;
height:574px;
li{
height:56px;
margin:10px010px0;
float:left;
img{
width:19px;
height:19px;
float:left;
margin:13px;
&.on{
display:block;
}
&.off{
display:none;
}
}
.listli{
float:left;
margin:19px13px013px;
}
.right{
float:left;
background:#ffffff;
width:328px;
height:56px;
padding:0px0013px;
box-sizing:border-box;
p:nth-of-type(1){
font-size:15px;
font-family:PingFangSC;
font-weight:400;
color:#000000;
line-height:29px;
}
p:nth-of-type(2){
font-size:13px;
font-family:PingFangSC;
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:18px13px018px;
&.on{
display:block;
}
&.off{
display:none;
}
}
.all{
margin:17px0014px;
}
p{
float:left;
font-size:13px;
font-family:PingFangSC;
font-weight:400;
color:#333333;
margin-top:18px;
}
}
button{
float:left;
width:138px;
height:50px;
line-height:50px;
background:#336afa;
color:#ffffff;
}
}

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐