效果图
HTML代码
<template>
<view>
<view class="ct_tab">
<view class="ct_item" :class="{'ct_active' : 0 == tabCur}" @click="clickCtTab(0)">
<text>全部</text>
</view>
<view class="ct_item" :class="{'ct_active' : 1 == tabCur}" @click="clickCtTab(1)">
<text>分类</text>
</view>
</view>
<view v-if="tabCur===0">
<view class="tabCur1">内容1</view>
</view>
<view v-else-if="tabCur===1">
<view class="tabCur1">内容2</view>
</view>
</view>
</template>
js
<script>
export default {
data() {
return {
tabCur:0
}
},
methods: {
clickCtTab(ctCur){
this.tabCur = ctCur
console.log(this.tabCur )
}
}
}
</script>
CSS
<style >
.ct_tab{
width: 698upx;
margin: 0 auto;
padding: 30upx 0;
font-size: 26upx;
font-weight: bold;
color: #c0c8d0;
display: flex;
align-items: center;
}
.ct_item{
width: 20%;
}
.ct_item text{
padding: 30upx 0;
}
.ct_active{
color:#007AFF;
}
.ct_active text{
border-bottom: 2px solid #007AFF;
}
.tabCur1{
padding: 20rpx;
background: #007AFF;
color: #fff;
margin-top: 20rpx;
}
</style>
完整代码
<template>
<view>
<view class="ct_tab">
<view class="ct_item" :class="{'ct_active' : 0 == tabCur}" @click="clickCtTab(0)">
<text>全部</text>
</view>
<view class="ct_item" :class="{'ct_active' : 1 == tabCur}" @click="clickCtTab(1)">
<text>分类</text>
</view>
</view>
<view v-if="tabCur===0">
<view class="tabCur1">内容1</view>
</view>
<view v-else-if="tabCur===1">
<view class="tabCur1">内容2</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabCur:0
}
},
methods: {
clickCtTab(ctCur){
this.tabCur = ctCur
console.log(this.tabCur )
}
}
}
</script>
<style >
.ct_tab{
width: 698upx;
margin: 0 auto;
padding: 30upx 0;
font-size: 26upx;
font-weight: bold;
color: #c0c8d0;
display: flex;
align-items: center;
}
.ct_item{
width: 20%;
}
.ct_item text{
padding: 30upx 0;
}
.ct_active{
color:#007AFF;
}
.ct_active text{
border-bottom: 2px solid #007AFF;
}
.tabCur1{
padding: 20rpx;
background: #007AFF;
color: #fff;
margin-top: 20rpx;
}
</style>