组件方式
<template>
<div>
<div class="bigbox">
<div class="title">
<div @click="tab(1)" :class="this.tabshow==1?'active':''">编制查询</div>
<div @click="tab(2)" :class="this.tabshow==2?'active':''">JD负荷查询</div>
<div @click="tab(3)" :class="this.tabshow==3?'active':''">承训负荷查询</div>
</div>
<hr />
<div class="containerbox">
<div v-show="tabshow==1">
组件1/内容1
</div>
<div v-show="tabshow==2">
组件2/内容2
</div>
<div v-show="tabshow==3">
组件3/内容3
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabshow: 3,
};
},
created() {},
methods: {
tab(val) {
this.tabshow=val
},
},
};
</script>
<style scoped>
.bigbox .title {
display: flex;
}
.bigbox .title div {
padding: 10px 40px;
border: 1px solid rgb(104, 97, 97);
cursor: pointer;
}
.containerbox {
}
.active {
background-color: #000;
color: #ffff;
}
html,body{
scroll-behavior:smooth;
}
</style>