定义多个Button按钮
<button :class="flag === 1?'active':'tab-button'" @click="tab1" id="tab1">标签1</button>
<button :class="flag === 2?'active':'tab-button'" @click="tab2" id="tab2">标签2</button>
<button :class="flag === 3?'active':'tab-button'" @click="tab3" id="tab3">标签3</button>
<button :class="flag === 4?'active':'tab-button'" @click="tab4" id="tab4">标签4</button>
定义每个按钮下的内容显示
<div class="div-content">
<div v-show="flag===1">标签1</div>
<div v-show="flag===2">标签2</div>
<div v-show="flag===3">标签3</div>
<div v-show="flag===4">标签4</div>
</div>
定义点击事件
methods: {
tab1() {
this.flag =1;
},
tab2() {
this.flag =2;
},
tab3() {
this.flag =3;
},
tab4() {
this.flag =4;
}
}
通过绑定动态的class样式来控制显示的样式,v-show可以控制哪个模块显示,在多个button排列的中,两个button之间会存在间隔,通过font-size可以清楚掉button之间的间隔
font-size: 0px;
完整代码:
<template>
<div>
<div class="div-main">
<button :class="flag === 1?'active':'tab-button'" @click="tab1" id="tab1">标签1</button>
<button :class="flag === 2?'active':'tab-button'" @click="tab2" id="tab2">标签2</button>
<button :class="flag === 3?'active':'tab-button'" @click="tab3" id="tab3">标签3</button>
<button :class="flag === 4?'active':'tab-button'" @click="tab4" id="tab4">标签4</button>
<div class="div-content">
<div v-show="flag===1">标签1</div>
<div v-show="flag===2">标签2</div>
<div v-show="flag===3">标签3</div>
<div v-show="flag===4">标签4</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'tabBar',
data() {
return {
flag: 1,
};
},
methods: {
tab1() {
this.flag =1;
},
tab2() {
this.flag =2;
},
tab3() {
this.flag =3;
},
tab4() {
this.flag =4;
}
}
};
</script>
<style scoped>
.div-main {
margin-top: 10px;
width: 400px;
height: 200px;
border: 1px solid #8c939d;
background-color: #8c939d;
/*父元素的font-size: 0可以去掉button之间的间隔*/
font-size:0;
}
.div-content {
width: 100%;
height: calc(100% - 50px);
background-color: #8c939d;
font-size: 15px;
}
.tab-button {
width: 100px;
height: 50px;
border: none;
background-color: #fff;
}
.active {
width: 100px;
height: 50px;
border: none;
background-color: #409EFF;
}
</style>