话不多说,看代码!!!
样式
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#tab{
width: 400px;
height: 400px;
background-color: #EBCCCC;
color: #FFFFFF;
}
span{
display: inline-block;
width: 24%;
height: 40px;
line-height: 40px;
text-align: center;
}
p{
height: 360px;
}
.bgc{
background-color: #007ACD;
color: #FFFFFF;
}
.bgc1{
background-color: deeppink;
}
.bgc2{
background-color: skyblue;
}
.bgc3{
background-color: lightgreen;
}
html
1.给span添加单击事件@click=" ", : class运用三元运算的方式来添加样式。
2.用v-if判断,p和span 一 一 对应。
<div id="tab">
<span @click="c=1" :class="c==1?'bgc':'' ">html</span>
<span @click="c=2" :class="c==2?'bgc':'' ">css</span>
<span @click="c=3" :class="c==3?'bgc':'' ">javascript</span>
<span @click="c=4" :class="c==4?'bgc':'' ">vue</span>
<p v-if="c==1" :class="c==1?'bgc1':''">html</p>
<p v-if="c==2" :class="c==2?'bgc2':''">css</p>
<p v-if="c==3" :class="c==3?'bgc3':''">javascript</p>
<p v-if="c==4">vue</p>
</div>
js
c默认为1
<script type="text/javascript">
new Vue({
el:"#tab",
data(){
return{
c:1
}
}
})
</script>