vue中 单选、多选、全选小功能

 单选多选全选是我们开发中经常会用到的功能，刚开始接触vue的时候也可以通过单选多选小功能的实现来更好的了解 vue 带来的方便便捷

<template>
    <view class="content">
        <!-- 单选 -->
        <view class="onlybtn">
            <text v-for="(item,index) in onlyList" :key="index" :class="ind==index?'btn active':'btn'"
                @click="changeonly(index)">{{item}}</text>
        </view>
        <!-- 多选 -->
        <view class="morebtn">
            <text v-for="(item,index) in moreList" :key="index" :class="changeMore.includes(item)?'btn active':'btn'"
                @click="changemore(item)">{{item}}</text>
        </view>
        <view>
            <view class="allchange" @click="allchange">
                <text :class="changeMore.length==moreList.length?'active circle':'circle'"></text>
                <text>全选</text>
            </view>
            <text>未全选中状态下，点击全选 多选中的按钮全部选中 再次点击取消</text>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                // 单选
                onlyList: ['租房', '买房', '卖房'],
                ind: 0,
                // 多选全选
                moreList: ['出行', '医疗', '住房', '吃喝'],
                changeMore: []
            }
        },
        methods: {
            // 单选
            changeonly(ind) {
                this.ind = ind
            },
            // 多选
            changemore(item) {
                if (this.changeMore.includes(item)) {
                    this.changeMore.splice(this.changeMore.indexOf(item), 1)
                } else {
                    this.changeMore.push(item)
                }
            },
            // 全选
            allchange() {
                if (this.changeMore.length == this.moreList.length) {
                    this.changeMore = []
                } else {
                   this.changeMore = Object([],this.moreList)
                }
                // 开始写没多想出 出现了小错误
                // if (this.changeMore.length == this.moreList.length) {
                //     this.changeMore = []
                // } else {
                //     this.changeMore = this.moreList
                // }
            }

        }
    }
</script>

<style>
    .btn {
        display: inline-block;
        margin-top: 10rpx;
        margin-left: 20rpx;
        border: 1rpx solid #ccc;
        padding: 5rpx 20rpx;
    }

    .btn.active {
        background-color: lightblue;
    }

    .allchange {
        display: flex;
        align-self: baseline;
    }

    .circle {

        display: inline-block;
        width: 30rpx;
        height: 20rpx;
        border: 1rpx solid #ccc;
        color: #fff;
        margin: 10rpx;
        border-radius: 50%;
    }

    .circle.active {
        background-color: lightblue;
    }

    button {
        margin: 20rpx;
    }
</style>

以上逻辑实现了小功能   但是再开始的时候没注意出现了小错误

 // 开始写没多想出 出现了小错误
 // if (this.changeMore.length == this.moreList.length) {
 //     this.changeMore = []
 // } else {
 //     this.changeMore = this.moreList
// }

为什么不能这样直接等于呢？

两个对象a,b如果直接 a = b ，在a发生改变时候 b也跟着发生改变。因为直接将b赋值给a,b与a就会指向同一个地址，就会导致a发生变化的时候b也发生变化 可以用Object.assign() 来解决。也可以将b中的对象循环放入a中