一种简单的选项卡切换
<template>
<div class="Tab">
<button v-for="(item,index) in arr" :key="index"
:class="index===Index ? 'ac':''"
@click="FnClick(index)">
按钮{{item}}
</button>
<div v-for="(item,index) in arr" :key="index"
:class="index===Index ? 'act':''">
内容{{item}}
</div>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
const arr=[1,2,3];
const Index=ref<number>(0);
const FnClick=(index:number)=>{
Index.value=index
}
</script>
<style scoped lang="less">
.Tab {
button {
width: 100px;
height: 50px;
margin: 5px;
}
button.ac {
background-color: red; }
div {
width: 400px;
height: 300px;
border: 1px solid #000;
display: none;
}
div.act {
display: block;
}
}
</style>