checkbox-group:多项选择器 内部由多个checkbox组成 属性说明如下:
- @change:选中项发生改变是触发的change事件
- value:选中时触发的change事件 并携带的value
通过ev.detail.value()判断谁被选中
<template>
<view class="content">
<checkbox-group name="" @change="ch">
<label v-for="(item,index) in arr" :key="index">
<checkbox :value="item" color="#3F536E" /><text>{{item}}</text>
</label>
</checkbox-group>
<view class="">
{{num}}个被选中
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
arr:["篮球","羽毛球","乒乓球","排球","保龄球","台球","高尔夫球"],
arr1:[]
}
},
onLoad() {
},
computed:{
num(){
return this.arr1.length;
}
},
methods: {
ch(ev){
// console.log(ev);
this.arr1.push(ev.detail.value);
console.log(this.arr1);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>