第一次做这个功能感觉这个功能很普遍,而且还挺有意思的,就记录一下
首先,由于按钮是循环出来的,首先给按钮添加一个响应式属性
// 增加响应式属性
res.result.forEach(v => {
v.isSelected = true;
})
this.checkContextItem = res.result;
html部分
<view class="select-date-box">
<view class="select-date-item" v-for="item of checkContextItem" :key="item.itemField" @click="checkItemClick(item)" :class="item.isSelected?'plan-select-date-active':''">{{item.itemName}}</view>
</view>
</view>
点击事件处理
// 任务项点击
checkItemClick(item) {
item.isSelected = !item.isSelected;
}
至此,整个功能算是完成了,其实代码量并不多,就是觉得这种场景还挺常见的,就总结一下