vue通过v-if实现tab页切换

最新推荐文章于 2025-01-08 16:28:46 发布

weixin_45369963

最新推荐文章于 2025-01-08 16:28:46 发布

阅读量2k

点赞数 4

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45369963/article/details/108237183

版权

<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>