js实现选中跟取消选择的操作

经常会遇到选择多个数据中的某条数据，然后再取消选择，如下图

image.png

以前我一般会给每条数据加条状态，checked，每次点击去取反，后面发现另外一个方法，不需要加状态就能实现，这样对数据少循环（加状态）了一次

html

<div class="wrap">
    <div :class="{item, active:checked.id == item.id}" v-for="(item, index) in list" :key="index" @click="choose(item)">{{item.name}}</div>
</div>

data

    data () {
        return {
            list: [
                {
                    name: '1234689',
                    id: 'q1'
                },
                {
                    name: '1234qqq',
                    id: 'q2'
                },
                {
                    name: '1234vvv',
                    id: 'q3'
                },
                {
                    name: '1234sss',
                    id: 'q4'
                },              {
                    name: '1234nnn',
                    id: 'q5'
                }
            ],
            checked: {}
        }
    },

js

    methods: {
        choose (item) {
            if (item.id === this.checked.id) {
                this.checked = {}
            } else {
                this.checked = item
            }
        }
    }

取消选择只要判断这次的id跟上次存的id是否一样，不一样就赋值，一样就清空，这样在dom里面的判断就false，就不会加选中的样式了，比之前加状态少了一次遍历，只是在赋值这边多了个判断