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

这篇文章主要为大家详细介绍了vue使用vant中的checkbox实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码，供大家参考，具体内容如下

• v-model=”item.flag”

  class=”listli”

  >

  {{ item.name }}

  {{ item.id }}

全选

确定

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)

}

}

};

.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;

}

}

本次遇到的问题是自己一开始没发现在people数组里面，定义的每一项flag的值设置的类型为字符串型即flag=”true”,导致一开始进入页面全部无论值为true还是false，复选框都是选中效果，修改之后便没有了此问题。关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。更多vue学习教程请阅读专题《vue实战教程》以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。