<template>
<div class="con">
<el-card class="box-card">
<!-- tab按钮 -->
<span class="tabs" :class="{to_active:isShow === 1}" @click="handleTab(1)">tab1</span>
<span class="tabs" :class="{to_active:isShow === 2}" @click="handleTab(2)">tab2</span>
<span class="tabs" :class="{to_active:isShow === 3}" @click="handleTab(3)">tab3</span>
<span class="tabs" :class="{to_active:isShow === 4}" @click="handleTab(4)">tab4</span>
<!-- 下面的div盒子 -->
<div v-if="isShow === 1">111111111</div>
<div v-if="isShow === 2">222222222</div>
<div v-if="isShow === 3">33333333</div>
<div v-if="isShow === 4">44444444</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
isShow: 1,
};
},
components: {},
methods: {
handleTab(val) {
this.isShow = val;
},
},
computed: {},
};
</script>
<style scoped>
.to_active {
color: #327bdc;
font-weight: 600;
}
.tabs {
width: 100px;
display: inline-block;
line-height: 40px;
}
</style>
vue通过v-if实现tab页切换
最新推荐文章于 2023-03-17 13:49:37 发布