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