SOURCE

console 命令行工具 X clear

                    
>
console
const v = new Vue({
    el: '#app',
    data: {
        list: [
            {
                text: '选项1',
                value: 1,
                selected: false,
                disabled: false,
            },
            {
                text: '选项2',
                value: 2,
                selected: false,
                disabled: false,
            },
            {
                text: '选项3',
                value: 3,
                selected: false,
                disabled: false,
            },
            {
                text: '选项4',
                value: 4,
                selected: false,
                disabled: false,
            }
        ]
    },
    methods: {
        handleClick(item) {
            if(item.disabled) return;
            item.selected = !item.selected;
        },
        // 全选
        handleAllSelected() {
          this.list = this.list.map((item)=> ({ ...item, selected: true }))
        
        },
        // 取消全选
        cancel() {
           this.list = this.list.map((item)=> ({ ...item, selected: false }))
        }
    }
})
<div id="app">
    <div>
        <span v-for="item in list" :key="item.value" :class="item.selected ? 'active': ''" @click="handleClick(item)">
            {{ item.text }}
        </span>
    </div>
    <button @click="handleAllSelected">全选</button>
    <button @click="cancel">取消全选</button>
</div>
span {
    background-color: white;
    margin: 10px;
}
.active {
    background-color: #f60;
}
button {
    margin: 10px;
}

本项目引用的自定义外部资源