div单选多选-动态改变样式

单选：

需求：
两个div，一次只能点击一个，将点击的div样式进行改变-加背景图并改背景色
效果图：

HTML：
条件表达式动态绑定样式：:class="{'active': isChange==index}

<div class="test" :class="{'active': isChange==index}" v-for="(item,index) in upArr"  :key="index" @tap="tapInfo(index,item.id)">
			<div class="upv1" >{{item.goods_name}}
				<div class="upv1_center"></div>
				<div class="upv1_money">￥</div>
				<div class="upv1_num">{{item.shop_price}}</div>
			</div>
			<div style="height: 20px"></div>
		</div>

data() {
			return {
				upArr:[
				{
					title:'升级V1',
					coast:10000
				},
				{
					title:'升级V2',
					coast:20000
				}
					],
				isChange:'-1',
				selected:false,
				good_id:''
			}
		},

tapInfo(index,good_id) {
				var that = this;
				console.log(index,good_id)
				that.goods_id = good_id;
				if(index!=this.isChange){
					that.selected = true;
					this.isChange = index;
				}else{
					this.isChange = -1;    //不注释则可以点击取消，注释之后点击就不再取消
					that.selected = false;
				}
			},

.active{
		.upv1{
			background: #FFF6F1;
			background-image:url("~@/static/img/selected.png");
			background-repeat:no-repeat;
			background-position:296px 38px;
			background-size: 33px;
		}
}
.test{
			.upv1{
				//margin: 20px 0px 0 33px;
				margin: 0 auto;
				width: 329px;
				height: 70px;
				//background: #FFF6F1;
				border-radius: 6px;
				border: 2px solid #FE9E67;


				//text-align: center;
				display: flex;
				justify-content: center; //flex布局下居中配置
				line-height: 70px;

				font-size: 16px;
				font-weight: bold;
				letter-spacing: 1px;

				.upv1_center{
					width: 100px;
				}
				.upv1_money{
					margin-top: 5px;
					font-size: 15px;
				}
				.upv1_num{
					font-size: 30px;
				}

			}
		}

多选：
效果图：

HTML：
三元运算符动态绑定样式：:class="[rSelect.indexOf(item)!=-1?'fordata2':'fordata1']"

<div  v-for="(item,index) in list" :key="index" @click="onStorage(item,index)" :class="[rSelect.indexOf(item)!=-1?'fordata2':'fordata1']">
                <div class="data_wrapper">
                    <!--<div class="data_id">SN:{{item.id}}</div>-->
                    <div class="data_sn">SN:{{item.sn}}</div>
                    <div class="data_check">
                        <!--<image src="/static/img/uncheck.png" class="img_one2" mode="scaleToFill"></image>-->
                    </div>
                </div>
                <div style="width: 100%;background-color: #efefef;height: 1px"></div>
            </div>

JS：

data(){
            return{
                rSelect:[],
            }
        },

methods:{
            onStorage(value,e){
                console.log(this.rSelect.indexOf(value));
                if (this.rSelect.indexOf(value) !== -1) {
                    this.rSelect.splice(this.rSelect.indexOf(value), 1); //取消
                } else {
                    this.rSelect.push(value);//选中添加到数组里
                }
                console.log(this.rSelect);
            },
          }

.fordata1{
        .data_wrapper{
            background: #FAFAFA;
            display: flex;
            height: 50px;
            width: 100%;
            line-height: 50px;
            /*.data_id{
                color: #999999;
                margin-left: 15px;
                width: 20%;
            }*/
            .data_sn{
                color: #666;
                width: 85%;
                margin-left: 15px;
            }
            .data_check{
                background-image:url("~@/static/img/uncheck.png");
                background-repeat:no-repeat;
                background-size: 33px;
                background-position-y: 8px;

                width: 15%;
                height: 50px;
                line-height: 50px;
                /*.img_one2{
                    margin-top: 8px;
                    width: 30px;
                    height: 30px;
                }*/
            }
        }
    }

    .fordata2{
        .data_wrapper{
            background: #FAFAFA;
            display: flex;
            height: 50px;
            width: 100%;
            line-height: 50px;
            /*.data_id{
                color: #999999;
                margin-left: 15px;
                width: 20%;
            }*/
            .data_sn{
                color: #666;
                width: 85%;
                margin-left: 15px;
            }
            .data_check{
                background-image:url("~@/static/img/check.png");
                background-repeat:no-repeat;
                background-size: 33px;
                background-position-y: 8px;

                width: 15%;
                height: 50px;
                line-height: 50px;
                /*.img_one2{
                    margin-top: 8px;
                    width: 30px;
                    height: 30px;
                }*/
            }
        }
    }