vue实现自定义多选按钮
html部分
<div :class=""getSxxClass(item) v-for="(item,index) in data.sxxList" :key="index" @click="sxxchangeQuery(item)"></div>
js部分
const data = reactive({
sxxList:[
{name:"重庆",id:'1'},
{name:"四川",id:'2'},
{name:"广西",id:'3'},
],
sxx:[],
})
const sxxchangeQuery = (val) => {
let ids = data.sxx.filter(item => {
return item;
})
if(ids.includes(val.id)){
data.sxx = data.sxx.filter(item => {
return item !== val.id
})
} else {
data.sxx.push(val.id)
}
}
const getSxxClass = (val) => {
return data.sxx.filter(item => {
return item === val.id
}).length > 0 ? 'active':'auther'
}