单身和已婚不能同时选中，不了解保险和已了解保险不能同时选中。同时各个标签点击可以取消选择

//html



  • 与我相关




    v-for="(item, index) in myself"

    :key="index"

    @click="checkButton('myself', item.id)"

    :class="item.isFlag ? 'current' : ''"

    >{{item.title}}







  • 标签




    v-for="item in biaoqian"

    :key="item.id"

    @click="checkButton('tag', item.id)"

    :class="item.isFlag ? 'current' : ''"

    >{{item.title}}






    • //html



  • 与我相关




    v-for="(item, index) in myself"

    :key="index"

    @click="checkButton('myself', item.id)"

    :class="item.isFlag ? 'current' : ''"

    >{{item.title}}







  • 标签




    v-for="item in biaoqian"

    :key="item.id"

    @click="checkButton('tag', item.id)"

    :class="item.isFlag ? 'current' : ''"

    >{{item.title}}




    • 数据

    myself: [

    { id: 1,title: "亲属", isFlag: false },

    {id: 2,title: "同乡",isFlag: false},

    {id: 3, title: "同学",isFlag: false },

    {id: 4,title: "同事", isFlag: false},],

    biaoqian: [

    {id: 1, title: "已婚",type: 1,isFlag: false },

    {id: 2,title: "单身",type: 1,isFlag: false },

    {id: 3,title: "有娃",isFlag: false },

    {id: 4,title: "有房", isFlag: false },

    {id: 5,title: "有车",isFlag: false},

    {id: 6,title: "不了解保险",isFlag: false,type: 2},

    {id: 7,title: "已了解保险",isFlag: false,type: 2} ],

    myself: [

    { id: 1,title: "亲属", isFlag: false },

    {id: 2,title: "同乡",isFlag: false},

    {id: 3, title: "同学",isFlag: false },

    {id: 4,title: "同事", isFlag: false},],

    biaoqian: [

    {id: 1, title: "已婚",type: 1,isFlag: false },

    {id: 2,title: "单身",type: 1,isFlag: false },

    {id: 3,title: "有娃",isFlag: false },

    {id: 4,title: "有房", isFlag: false },

    {id: 5,title: "有车",isFlag: false},

    {id: 6,title: "不了解保险",isFlag: false,type: 2},

    {id: 7,title: "已了解保险",isFlag: false,type: 2} ],js
    //标签只能选中一个
    filterData(arr = [], index) {

    let val = "";

    arr.forEach(item => {

    if (item.id == index) {

    item.isFlag = !item.isFlag;

    val = item.isFlag ? item.title : "";

    } else {

    item.isFlag = false;

    }

    });

    return val;
    },
    checkButton(val, index) {

    if (val === "tag") {

    let data = [];

    this.biaoqian.forEach(item => {

    if (item.id == index) {

    // a 记录当前标签状态是否选中，为了取消标签状态

    let a = item.isFlag;

    item.isFlag = !item.isFlag;

    if (item.type) {

    this.biaoqian.forEach(e => {

    if ((e.type == 1 && index < 3) || (e.type == 2 && index > 5)) {

    //先把同一个类型的标签都置为false

    e.isFlag = false;

    if (e.id == index) {

    e.isFlag = a ? false : !e.isFlag;

    }

    }

    });

    }

    }

    });

    let arr = this.biaoqian.filter(item => {

    return item.isFlag;

    });

    arr.forEach(item => {

    data.push(item.title);

    });

    this.personItem.labelList = data;

    } else if (val === "sex") {

    this.personItem.sex = this.filterData(this.sexArr, index);

    } else {

    this.personItem.relation = this.filterData(this.myself, index);

    }
    }

    //标签只能选中一个
    filterData(arr = [], index) {

    let val = "";

    arr.forEach(item => {

    if (item.id == index) {

    item.isFlag = !item.isFlag;

    val = item.isFlag ? item.title : "";

    } else {

    item.isFlag = false;

    }

    });

    return val;
    },
    checkButton(val, index) {

    if (val === "tag") {

    let data = [];

    this.biaoqian.forEach(item => {

    if (item.id == index) {

    // a 记录当前标签状态是否选中，为了取消标签状态

    let a = item.isFlag;

    item.isFlag = !item.isFlag;

    if (item.type) {

    this.biaoqian.forEach(e => {

    if ((e.type == 1 && index < 3) || (e.type == 2 && index > 5)) {

    //先把同一个类型的标签都置为false

    e.isFlag = false;

    if (e.id == index) {

    e.isFlag = a ? false : !e.isFlag;

    }

    }

    });

    }

    }

    });

    let arr = this.biaoqian.filter(item => {

    return item.isFlag;

    });

    arr.forEach(item => {

    data.push(item.title);

    });

    this.personItem.labelList = data;

    } else if (val === "sex") {

    this.personItem.sex = this.filterData(this.sexArr, index);

    } else {

    this.personItem.relation = this.filterData(this.myself, index);

    }
    }
    补充知识：vue选中与取消简单实现补充知识：补充知识：vue选中与取消简单实现我就废话不多说了，大家还是直接看代码吧~

  • :key="index"

    @click="selected(item)"

    :class="{'active':item.isShow}">

    selected(item) {

    if (!item.isShow) {

    item.isShow = true;

    this.selectedList.push(item.id)

    } else {

    item.isShow = false;

    let index = this.selectedList.indexOf(item.id);

    if (index > -1) {

    this.selectedList.splice(index, 1);

    }

    }

    },

  • :key="index"

    @click="selected(item)"

    :class="{'active':item.isShow}">

    selected(item) {

    if (!item.isShow) {

    item.isShow = true;

    this.selectedList.push(item.id)

    } else {

    item.isShow = false;

    let index = this.selectedList.indexOf(item.id);

    if (index > -1) {

    this.selectedList.splice(index, 1);

    }

    }

    },以上这篇vue点击标签切换选中及互相排斥操作就是小编分享给大家的全部内容了，希望能给大家一个参考。