vue按钮点击选中,再次点击取消选中功能(非checkbox)

第一次做这个功能感觉这个功能很普遍,而且还挺有意思的,就记录一下
首先,由于按钮是循环出来的,首先给按钮添加一个响应式属性
// 增加响应式属性
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;
}
至此,整个功能算是完成了,其实代码量并不多,就是觉得这种场景还挺常见的,就总结一下
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容