vue小程序手动写tab卡片切换

先上代码：

　　

<!-- 选项 -->
<view class="option">
<!-- 选项标题 -->
<view class="optionVip">
<view class="vipBox" :class="{lisVip:classVip == items,oneList:vipOneList}" @click="vipSpecial(items)" v-for="(item,items) in listVip"
:key="items">
{{item.cont}}
<view class="">{{item.text}}</view>
</view>
</view>
<!-- 选项内容年卡 -->
<view class="yearCard" v-for="(yearItem,isYear) in 3" v-show="isYear == classVip">
<view class="yearCardLis" v-for="(year,index) in 4" :key='index' :class="{speYearCard:yearActive == index,oneYearCard:oneYearCard}"
@click="isYearCard(index)">
<text>年卡</text>
<view class="yearPrice">售价102.20元</view>
</view>
</view>
</view>

methods: {
// 会员高亮以及切换
vipSpecial(items) {
this.classVip = items;
this.vipOneList = false
},
}

.yearCard {
690rpx;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding-bottom: 188rpx;

.yearCardLis {
box-sizing: border-box;
214rpx;
height: 108rpx;
border-radius: 12rpx;
border: solid 2rpx #e5e5e5;
margin: 24rpx 24rpx 0 0;
padding: 22rpx 0;
text-align: center;

text {
color: #333;
font-size: 34rpx;
font-weight: bold;
}

.yearPrice {
font-size: 20rpx;
color: #666;
margin-top: 11rpx;
}
}

.yearCardLis:nth-of-type(3n) {
margin-right: 0;
}

.speYearCard {
border: solid 3rpx #ff3f3e;
background: rgba(255, 63, 62, 0.1);

text {
color: #ff3f3e;
}

.yearPrice {
color: #ff3f3e;
}
}
}
.yearCard:nth-of-type(3) .speYearCard{
border: solid 3rpx yellow;
background: rgba(255, 63, 62, 0.1);
}

没法弄视频就截的图

点击前后点击后效果图