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>