vue绑定checkbox,van-checkbox
这篇文章主要为大家详细介绍了某视频剪辑软件使用栈中的检验盒实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件使用栈中的检验盒实现全选功能的具体代码，供大家参考，具体内容如下
模板
div class=visiblePeople
顶栏/
ul class=列表清除_浮动
李v-for=(item，index) in people :key=index
货车-复选框
v-model=item.flag
听着
/凡-复选框
div class=右
p{{ item.name }}/p
p{{ item.id }}/p
/div
/李
/ul
div class=bottom
div class=left
van-checkbox v-model=所有检查 class=所有全选/凡-复选框
/div
按钮@click=跳转确定/按钮
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
人物：[
{ id: 002 ，名称： 陈阳，flag: true }，
{
id:“003”，
名称： 王苗苗，
标志：真的，
},
{
id: 004 ，
名称： 张梁俊，
标志：真的，
},
{
id: 005 ，
名称： 刘路，
标志：真的，
},
],
};
},
方法：{
//点击确定后跳转回新增合同页面
jump() {
这个1000美元路由器。推送(/添加合同)；
},
//单选按钮切换
//更改（索引){
//this.people[index].flag=！this.people[index].旗帜；
//控制台。日志(这个。人[索引]。旗帜);
//},
},
计算值：{
allcheck:{
get(){
//取值
//每方法，数组中每一项都满足一个条件返回真实的
返回这个。人们。every(item=item。旗帜)
},
set(newValue){
//设置值
console.log(触发设置方法)
这个。人们。map(item=item。标志=新值)
}
},
filterAll(){
返回这个。人们。过滤器(item=item。旗帜).长度
},
计数(){
让检查列表=这个。人们。过滤器(item=item。旗帜)
返回检查列表。长度。减少((总计，项目)={
返回项目总数
},0)
}
}
};
/脚本
style lang=less 范围。列表{
背景：# F8 F9 FB；
身高：574px
李{
高度：56px
边距：10px 0 10px 0
浮动：左；
img {
宽度：19px
高度：19px
浮动：左；
保证金：13px。在{
显示：块；
}。关闭{
显示：无；
}
}。listli {
浮动：左；
边距：19px 13px 0 13px
}。右{
浮动：左；
背景：# ffffff
宽度：328像素
高度：56px
填充：0px 0 0 13px
框大小：边框-框；
p:第n种类型(1) {
字号：15px
字体系列：方平SC；
字体粗细：400;
颜色：# 000000;
行高：29px
}
p:第n种类型(2) {
字体大小：13px
字体系列：方平SC；
字体粗细：400;
颜色：# 666666;
行高：14px
}
}
}
}。底部{
高度：50px
位置：固定；
底部：0;左侧{
宽度：237像素
背景：# ffffff
身高：100%;
浮动：左；
img {
宽度：18px
浮动：左；
边距：18像素13像素0 18像素。在{
显示：块；
}。关闭{
显示：无；
}
}。全部{
边距：17px 0 0 14px
}
p {
浮动：左；
字体大小：13px
字体系列：方平SC；
字体粗细：400;
颜色：# 333333;
边距-顶部：18px
}
}
按钮{
浮动：左；
宽度：138像素
高度：50px
行高：50px
背景：# 336afa
颜色：# ffffff
}
}
/风格
本次遇到的问题是自己一开始没发现在人数组里面，定义的每一项旗的值设置的类型为字符串型即flag=true ，导致一开始进入页面全部无论值为真实的还是假的，复选框都是选中效果，修改之后便没有了此问题。
关于vue。j组件的教程，请大家点击专题vue。j组件学习教程进行学习。
更多某视频剪辑软件学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。