<div class="label" id="label">
    <span @click="label.label1 = !label.label1" :class="label.label1 ? 'active' : '' ">不吃辣</span>
    <span @click="label.label2 = !label.label2" :class="label.label2 ? 'active' : '' ">少放辣</span>
    <span @click="label.label3 = !label.label3" :class="label.label3 ? 'active' : '' ">多放辣</span>
    <span @click="label.label4 = !label.label4" :class="label.label4 ? 'active' : '' ">不吃蒜</span>
    <span @click="label.label5 = !label.label5" :class="label.label5 ? 'active' : '' ">不吃香菜</span>
    <span @click="label.label6 = !label.label6" :class="label.label6 ? 'active' : '' ">不吃葱</span>
</div>
<van-button @click="complete">完成</van-button>
data(){
    return{
        label:{
            label1:false,
            label2:false,
            label3:false,
            label4:false,
            label5:false,
            label6:false,
            label7:false,
        },
    }
}

methods:{
    complete(){
        this.noteVal.length = 0;
        this.noteFlag = false;
        let active = document.querySelectorAll('#label .active');
        active.forEach(item => {
            this.noteVal.push(item.innerText);
        });
    }
},
复制代码

通过data中的label属性判断当前为true时就高亮显示，

点击完成按钮获取到ID label下的每个class类名active,遍历active获取到每个item。item就是每项高亮的内容。