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