Vue label single selection, multiple selection effect

1. Page

<van-tag type="primary" size="large" :plain="item.checked == true ? false : true"
    v-for="(item , index) in tagListType" :key="index" @click="bindTag(index)">{
   
   {item.name}}
    </van-tag>

2. Public data

//初始数据
tagListType: [{
    
    
    name: "全部",
    checked: true,
    id:''
}, {
    
    
    name: "选项一",
    checked: false,
    id:1
}, {
    
    
    name: "选项二",
    checked: false,
    id:2
}],
//盛放选中标签的id
tagListTypeArr: []

Three, radio

Requirement: Select the current tag to get the id and append it to the array, only one item can be selected

bindTag(index){
    
    
	let id= this.tagListType[index].id
	this.tagListType.map(item => {
    
    
        item.checked = false
        this.tagListType[index].checked = true
    })
    this.tagListTypeArr.splice(0, 1)
    this.tagListTypeArr.push(id)
}

Four, multiple choice

Requirement: Select the current label to get the id and append it to the array, multiple can be selected, but if all are selected, other selected labels will be cleared

bindTag(index){
    
    
    let id = this.tagListType[index].id
    if(index == 0){
    
    
    	//选中全部标签清除其他标签
        this.tagListType.map(item => {
    
    
            item.checked = false
            this.tagListType[index].checked = true
        })
        this.tagListTypeArr = []
    }else{
    
    
    	//选中其他标签清除全部标签
        this.tagListType[0].checked = false
        //点击标签如果标签已选中则取消，未选中则选中，并把id追加到数组
        if (this.tagListTypeArr.includes(id)) {
    
    
            this.tagListType[index].checked = false
            this.tagListTypeArr.splice(this.tagListTypeArr.findIndex(item => item === id), 1)
        } else {
    
    
            this.tagListType[index].checked = true
            this.tagListTypeArr.push(id)
        }
    }
}