uniapp 标签技能多选 最多选三个

uniapp 标签技能多选 最多选三个

html部分

<template> <view class="en"> <view class="xh"> <view class="ac" :class="{ kun: checkedArrey.indexOf(i) != -1 }" v-for="(item,i) of items" :key="i" @click="appointment(i)"> <view class="">{{item.val}}</view> </view> </view> </view> </template>

js部分

export default { data() { return { items:[ {val:'情感困惑'}, {val:'婚姻家庭'}, {val:'亲子教育'}, {val:'个人成长'}, {val:'心理健康'}, {val:'职场心理'}, {val:'人际关系'}, {val:'情绪管理'}, {val:'两性心理'} ], checkedArrey: [] }; }, methods: { appointment(index) { let that = this; if (that.checkedArrey.indexOf(index) == -1 && that.checkedArrey.length<3) { // console.log(index); //打印下标 that.checkedArrey.push(index); //选中添加到数组里 }else if(that.checkedArrey.length==3 ||that.checkedArrey.indexOf(index), 1){ uni.showToast({ title:'最多只能选三个', duration:1000, icon:'none' }) that.checkedArrey.splice(that.checkedArrey.indexOf(index), 1); //取消 } } } };

css部分 用的scss

.en { width: 100%; padding:0 30rpx 0; box-sizing: border-box; .xh { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; .ac { width: 22%; height: 60rpx; line-height: 60rpx; border: 2rpx solid #E6E6E6; text-align: center; margin-top: 30rpx; font-size: 26rpx; color: #666; } } } .kun { color: red !important; }