闲来无事，写个一个简单选项卡玩一下！！！
v-if和v-show都可以控制元素的显示和隐藏，当值为true时元素显示，当值为false时元素隐藏。v-if和v-show的区别：v-if是直接删除或者创建元素，控制元素的显示和隐藏；v-show是使用display样式控制元素的显示和隐藏。
实现两个功能。(1)实现单击菜单切换div盒子。(2)实现菜单排他功能。
v-if实现选项卡案例
<template>
<h2>v-if实现选项卡的案例</h2>
<div class="box">
<div class="changeBox">
<div :class="{redColor:isActive == 0}" @click="isActive = 0">选项一</div>
<div :class="{redColor:isActive == 1}" @click="isActive = 1">选项二</div>
<div :class="{redColor:isActive == 2}" @click="isActive = 2">选项三</div>
</div>
<div class="contentBox">
<div v-if="isActive==0">我是选项{{isActive+1}}的内容</div>
<div v-if="isActive==1">我是选项{{isActive+1}}的内容</div>
<div v-if="isActive==2">我是选项{{isActive+1}}的内容</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
let isActive = ref(0)
</script>
<style lang="scss" scoped>
.redColor{
background-color: red;
}
.box{
width: 600px;
height: 500px;
background-color: skyblue;
.changeBox{
height: 100px;
width: 100%;
background-color: pink;
display: flex;
justify-content: space-around;
align-items: center;
div{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.contentBox{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
font-size: 30px;
}
}
</style>
v-if实现选项卡案例
<template>
<h2>v-if实现选项卡的案例</h2>
<div class="box">
<div class="changeBox">
<div :class="{redColor:isActive == 0}" @click="isActive = 0">选项一</div>
<div :class="{redColor:isActive == 1}" @click="isActive = 1">选项二</div>
<div :class="{redColor:isActive == 2}" @click="isActive = 2">选项三</div>
</div>
<div class="contentBox">
<div v-if="isActive==0">我是选项{{isActive+1}}的内容</div>
<div v-if="isActive==1">我是选项{{isActive+1}}的内容</div>
<div v-if="isActive==2">我是选项{{isActive+1}}的内容</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
let isActive = ref(0)
</script>
<style lang="scss" scoped>
.redColor{
background-color: red;
}
.box{
width: 600px;
height: 500px;
background-color: skyblue;
.changeBox{
height: 100px;
width: 100%;
background-color: pink;
display: flex;
justify-content: space-around;
align-items: center;
div{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.contentBox{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
font-size: 30px;
}
}
</style>
