Vue3 + Ts 实现选项卡操作

最新推荐文章于 2024-12-17 13:08:36 发布

你怎么生气了

最新推荐文章于 2024-12-17 13:08:36 发布

阅读量634

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_64387562/article/details/125918433

版权

Vue3 + Ts

<template>
  <div class="Tab">
    <div class="Tab-Box-title">
      <div @click="handel(index)" v-for="(item, index) in title" :key="index"
        :class="selectIndex === index ? 'action' : ''">
        {{ item }}
      </div>
    </div>
    <div class="Tab-Box-content">
      <div v-for="(item, index) in title" :key="index" :class="selectIndex === index ? 'block' : ''">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
const selectIndex = ref<number>(0);
const title = ref<number[]>([1, 2, 3, 4, 5]);
const handel = (index: number) => {
  selectIndex.value = index;
}
</script>
<style lang="less" scoped>
.Tab {
  width: 600px;
  height: 400px;
  border: 1px solid #000;
  margin: 100px auto;

  .Tab-Box-title {
    width: 100%;
    height: 60px;
    border: 1px solid #000;
    font-size: 20px;
    line-height: 60px;
    display: flex;
    text-align: center;
    background: red;

    >div {
      width: 20%;
      height: 60px;
    }
  }

  .Tab-Box-content {
    width: 100%;
    height: 340px;
    background: skyblue;

    >div {
      width: 100%;
      height: 340px;
      display: none;
      text-align: center;
      line-height: 340px;
      font-size: 70px;
    }
  }
}

.action {
  background: skyblue;
}

.block {
  display: block !important;
}
</style>

具体实现思路：在点击事件中存入下标然后在行内利用三元运算来控制那个显示那个隐藏