<template>
<div class="box">
<!--省市区-->
<div class="addBody">
<ul >
<li v-for="(item,index) in head" :key="index" v-bind:class="{act:active == index}" @click="active = index">{{item}}</li>
</ul>
<div v-for="(item,index) in content" :key="index" v-show="index == active">{{item}}</div>
</div>
</div>
</template>
<script>
export default {
name: "Provinces",
data() {
return {
active:0,
head:['省','市','区'],
content:['河北省','石家庄市','长安区'],
};
},
};
</script>
<style lang="scss" scoped>
.addBody {
width: 430px;
height: 400px;
border: 1px solid #cccccc;
ul {
height: 28px;
line-height: 28px;
display: flex;
background-color: #F0F0F0;
border: 1px solid #F0F0F0;
li {
width: 33.33%;
height: 100%;
text-align: center;
}
}
ul>li.act{
background-color: white;
}
}
</style>
效果图 :