uniapp如何选择并输出值

运行结果

运行代码

<template>
    <view>
        <view class="mmm">
            <view class="tanone" v-for="(item,index) in list" :key="index">
                <view class="item1" :class="item.selected?'active':''" @click="choice(index)"></view>
                <view class="item2">{{item.title}}</view>
            </view>
        </view>
        <view style="font-size: 26rpx;">{{selectId.length}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                selectId: [],
                list: [

                    {
                        selected: false,
                        title: '11'
                    },
                    {
                        selected: false,
                        title: '12'
                    },
                    {
                        selected: false,
                        title: '13'
                    },
                    {
                        selected: false,
                        title: '14'
                    },
                    {
                        selected: false,
                        title: '15'
                    }
                ]
            }

        },
        methods: {
            choice(index) {
                if (this.list[index].selected == true) {    //当点击1次时判断数组是否存在，如果为对则删除这个数组，
                    this.list[index].selected = false;      //并判断点击的selected为错，active不显现
                    for (var i = 0; i < this.selectId.length; i++) {    //当为false时，则selected为对，active显现
                        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>

<style lang="scss" scoped>
    .mmm {
        display: flex;
        flex-direction: column;

        .tanone {
            display: flex;
            width: 100rpx;
            background: lemonchiffon;

            .item1 {
                width: 50rpx;
                height: 50rpx;
                border: 1rpx solid #cc2232;
                border-radius: 50%;
            }

            .active {
                background: hotpink;
            }

            .item2 {
                font-size: 26rpx;
                color: darkgoldenrod;
                line-height: 30rpx;
            }
        }
    }
</style>