VUE 加入购物车实现多个属性选择，取消选择，最后组合成新的属性数组。

<template>
     <!--  --> 
    <div class="attrselect">   
           <template v-for="(item2,index) in goodsAttributes">
            <p class="p1">{{item2.name}}</p>
            <dl>
             <dd v-for="(a,i) in item2.labelList"><span @click="selectAttr(i,index)" :class="item2.curIndex == 'cur_'+index+'_'+i?'on':''">{{a}}</span></dd> 
            </dl> 
            </template>
           <div class="specprice">          
            <label v-if="spectext!=''|| attrText.length>0"><i>(</i><i>{{spectext}}</i><i v-if="spectext!='' && attrText.length > 0">,</i>
            <template v-for="(item,index) in attrText">{{item.text}}<i v-if="index < attrText.length-1">,</i></template><i>)</i>
            </label>           
           </div>
    </div>
</template>
<style>
.attrselect dl{overflow: hidden; margin-left:-0.2rem;}
.attrselect dl dd{float:left; width:33.3333333%; padding-left:0.2rem; padding-top:0.2rem; }
.attrselect dl dd span{ display:block; text-align: center; color:#666; border:0.01rem solid #eee; overflow:hidden; height:0.6rem; line-height: 0.6rem; font-size:0.23rem;}
.attrselect dl dd span.on{ border-color: #ffa82b; color:#ffa82b; background: #fff4e5}
</style>

<script>

export default {    
    data(){
        return{           
            goodsAttributes:[{name:'好美',labelList:['好','不好']},{name:'你好',labelList:['你好','你不好']},{name:'我好',labelList:['我好','我不好']}], //属性数组          
            attrText:[], //已选择属性数组           
        }
    },
    mounted(){
         //给属性添加一个新属性作为当前高亮用
         this.goodsAttributes.forEach((item,index) => {
                this.$set(item, 'curIndex','');
         })
    }，
    methods:{ 
        //选择属性
        selectAttr(i,index){             
            if(this.goodsAttributes[index]['curIndex'] == 'cur_'+index+'_'+i){
                this.goodsAttributes[index]['curIndex'] = ''; 
                this.attrText.forEach((item,a)=>{
                   if(item.id==index){ this.attrText.splice(a,1); }
                }) 
            }else{ 
                this.goodsAttributes[index]['curIndex'] = 'cur_'+index+'_'+i; 
                let text = this.goodsAttributes[index].labelList[i];                 
                var flag = 0;      
                this.attrText.forEach((item,a)=>{
                    if(item.id == index && item.index != i){          
                        this.attrText[a].id = index;
                        this.attrText[a].index = i;
                        this.attrText[a].text = text;
                        flag = 1;
                    }
                },this)
                if(flag==0){
                    this.attrText.push({id:index,index:i,text:text});  
                }                               
            }          
        },
    }
}
</script>