CSS实现卡片切换效果

点击之后

改变边框和背景

Vue代码

      <view v-for="(items,index) in list" :key='index'  :class="{active:categoryIndex==index,'singleClickOne':categoryIndex!=index}" @click="clickCategory(index)">
                      <view class="usernam">{{items.name}}</view>
                      <view class="price">
                             <text class="items_price">￥{{items.Price}}</text>
                             <text class="discount">￥{{items.discount}}</text>
                      </view>
                      <view class="day">
                             <text>{{items.day}}</text>
                      </view>
                  </view>

    .active {
         width: 150rpx;
         flex-wrap:wrap; /* 表示每行填满时会自动换行。 */
         margin-left: 9%;
         margin-top: 20rpx;
         float: left;
         height: 200rpx;
         border-radius: 12rpx;
         background-color: #F0F7FD;
         border: 1.5px solid #78BCE0;
    }
    .singleClickOne{
        width: 150rpx;
        flex-wrap:wrap; /* 表示每行填满时会自动换行。 */
        margin-left: 9%;
        margin-top: 20rpx;
        float: left;
        height: 200rpx;
        border-radius: 12rpx;
        background-color: #FFFFFF;
        border: 1.5px solid #E4E4E4;
        
    }
    .usernam{
        margin-top: 10%;
        width: 100%;
        text-align: center;
        line-height: 50rpx;
        font-size: 28rpx;
        height: 50rpx;
        font-weight:600;
    }
            .price{
        margin-top: 10%;
        width: 100%;
        text-align: center;
        font-weight:600;
        line-height: 50rpx;
        height: 50rpx;
        color: #2091ED;
    }    .items_price{
            font-size: 26rpx;
    }.discount{
        font-size: 14rpx;
        font-weight:400;
        color: #A4A9AD;
        text-decoration:line-through;
    }    .day{
        font-size: 14rpx;
        height: 50rpx;
        width: 100%;
        color: #A4A9AD;
        margin-top: 6%;
        line-height: 50rpx;
        text-align: center;
    }

展示数据vue

  categoryIndex: 0, //点击当前背景变成白色索引
list:[
                    {
                        name: 'VIP周卡',
                        id: 0,
                        discount: '10',
                        Price:'7.5',
                        day:'7天'
                    },
                    {
                        name: 'VIP月卡',
                        id: 1,
                        discount: '19.8',
                        Price:'16.8',
                        day:'一个月'
                    },
                    {
                        name: 'VIP季卡',
                        id: 2,
                        discount: '58',
                        Price:'49.3',
                        day:'3个月'
                    },
                    {
                        name: 'VIP年卡',
                        id: 3,
                        discount: '198',
                        Price:'158.4',
                        day:'12个月'
                    }
                ]

methods: {

clickCategory(index){ // 这里我们传入一个当前值
console.log(index);
　　this.categoryIndex = index
},

}

效果就完美实现了