<template>
<div class="hello">
<ul class="tab-list">
<li><a href="javascript:void(0)" @click="curId=0" :class="{'cur':curId===0}">html</a></li>
<li><a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a></li>
<li><a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a></li>
<li><a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a></li>
</ul>
<div class="tab-con">
<div v-show='curId===0'>html</div>
<div v-show='curId===1'>css</div>
<div v-show='curId===2'>javascript</div>
<div v-show='curId===3'>vue</div>
</div>
</div>
</template>
<script>
export default{
data(){
return {
curId: 0
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{width: 600px;margin: 0 auto;}
ul {list-style-type: none;padding: 0;width: 600px}
li a{display: inline-block;height: 40px;line-height: 40px;font-size: 16px;width: 25%;text-align: center;background: #ccc;color: #333;text-decoration: none;float: left;}
a.cur{background: #09f;color: #fff;}
.tab-con div{border: 1px solid #ccc;height: 400px;padding-top: 20px;}
</style>
效果图如下