uniapp多选按钮

闲言少叙，直接上效果图，看图才知道是不是自己想要的效果

 

 HTML代码

<view class="page index">
        <!-- 多选，不改变选择中后的值 -->
        <view class="list-box">
            <view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
                {{item.selected?item.title:item.title}}
            </view>
        </view>

        <!-- 多选，改变选择中后的值 -->
        <!-- <view class="list-box">
            <view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
                {{item.selected?"已选择":"选择"}}
            </view>
        </view> -->
    </view>

 

js代码

 

<script>
    export default {
        data() {
            return {
                list: [{
                        selected: false,
                        title: '张三'
                    },
                    {
                        selected: false,
                        title: '李四'
                    },
                    {
                        selected: false,
                        title: '张三'
                    },
                    {
                        selected: false,
                        title: '张三'
                    },
                    {
                        selected: false,
                        title: '张三'
                    },
                ],
                selectId: [],
            };
        },
        methods: {
            //选择按钮
            choice(index) {
                if (this.list[index].selected == true) {
                    this.list[index].selected = false;
                    //取消选中时删除数组中的值
                    for (var i = 0; i < this.selectId.length; i++) {
                        if (this.selectId[i] === this.list[index].course_id) {
                            this.selectId.splice(i, 1);
                        }
                    }
                    console.log("选中的值", this.selectId)
                } else {
                    this.list[index].selected = true;
                    this.selectId.push(this.list[index].course_id)
                    console.log("选中的值", this.selectId)
                }
            }
        }
    };
</script>

 

 

scss代码

 

<style lang="scss">
    .list-box {
        display: flex;
        flex-wrap: wrap;
        padding: 16upx;
        border-radius: 10upx;

        view {
            width: 30%;
            height: 60upx;
            line-height: 60upx;
            text-align: center;
            margin-top: 30upx;

            &:not(:nth-child(3n)) {
                margin-right: calc(10% / 2);
            }
        }
    }

    /* 已选择 */
    .selde {
        border: 1px solid red;
        background: red;
        color: #FFFFFF;
        border-radius: 20upx;
        font-size: 20upx;
        padding: 0 10upx;
    }

    /* 未选择 */
    .noselde {
        border: 1px solid #959595;
        background: #FFFFFF;
        color: #959595;
        border-radius: 20upx;
        font-size: 20upx;
        padding: 0 10upx;
    }
</style>