1. 效果
image.png
2. 代码
2.1 javaScript
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:".tab",
data:{
btnText:["html","css","javascript"],
context:["html是超文本标记语言","css是层叠样式表","javascript一种直译式脚本语言，弱类型"],
idx:0,//先默认为第一个显示
red:"red",
skyblue:"skyblue",
pink:"pink"
},
methods:{
selTab(index){
this.idx = index;
}
}
})
</script>
2.2 html
<div class="tab" v-cloak>
<div class="btn">
<button :class="{active:index==idx}" v-for="(val,index) in btnText" v-on:click="selTab(index)">{{val}}</button>
</div>
<div class="content" :class="idx==0?red:idx==1?skyblue:pink">
{{context[idx]}}
</div>
</div>
2.3 css
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
.tab{
width: 300px;
height: 300px;
border: 1px solid black;
box-sizing: border-box;
margin: 20px auto;
}
.tab button{
width: 33.333%;
float: left;
height: 35px;
}
.tab button:nth-of-type(3)::after{
content: "";
clear: both;
}
.content{
margin-top: 50px;
text-indent: 2em;
padding: 5px;
}
[v-cloak]{
display: none;
}
.active{
color:#fff;
background: #666666;
}
.red{
color:red;
}
.skyblue{
color: skyblue;
}
.pink{
color: pink;
}
</style>
