uniapp多选按钮

<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>

<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(vari = 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>

<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>