一、多选 

        <view class="title">物品类别</view>
            <view class="box dis-flex justify-between flex-wrap">
                <view class="lias" :class="item.selected ? 'active' : ''" v-for="(item,index) in goodsCateogory" :key="index" @click="goodsClick(item,index)">
                  {{item.title}}
              </view>
            </view>

               goodsCateogory:[            //物品类别列表
                    {id:1,title:'消耗品'},
                    {id:2,title:'赠品'},
                    {id:3,title:'宣传'},
                ],
                selectId:[],

           goodsClick(item,index){
                if(item.selected == true){
                    this.$delete(item,'selected')
                    //取消选中时删除数组中的值
                    for(var i = 0; i < this.selectId.length; i++){
                        if(this.selectId[i] === item.id){
                            this.selectId.splice(i,1);
                        }
                    }
                    console.log("选中的值1",this.selectId)
                }else{
                    this.$set(item,'selected',true)
                    this.selectId.push(item.id)
                    console.log("选中的值2",this.selectId)
                }
                var listIds = this.selectId.join(",")
                console.log("提交的数据",listIds)
            },

 

二、单选

<view class="lias" :class="cateogoryActive==index ? 'active' : ''" v-for="(item,index) in goodsCateogory" :key="index" @click="goodsCateogoryClick(item,index)">
   {{item.title}}
</view>
                goodsCateogory:[            //物品类别列表
                    {id:11,title:'汽车消耗品'},
                    {id:12,title:'推广赠品'},
                    {id:13,title:'推广宣传'},
                ],
                cateogoryActive:-1,
             goodsCateogoryClick(item,index){
                //单选
                if(this.cateogoryActive == index) {
                    this.cateogoryActive = -1
                } else {
                    this.cateogoryActive = index
                    console.log(item)
                }
            },

 

 

 

 

 

 

 

 

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐