2019独角兽企业重金招聘Python工程师标准>>> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#tab{
width:600px;
margin:0 auto;
}
.tab_title{
font-size:0; /*有间隙*/
width:600px;
}
.tab_title a{
display: inline-block;
height:40px;
line-height: 40px;
font-size:16px;
width:25%;
text-align: center;
background: #ccc;
color:#333;
text-decoration: none;
}
.tab_title .cur{
background:#09f;
color:#fff;
}
.tab_content div{
border:1px solid #ccc;
height:400px;
padding-top:20px;
}
</style>
</head>
<body>
<div id="tab">
<!-- 导航 -->
<div class="tab_title">
<!-- 点击设置curId的值 -->
<a href="#" :class="{'cur':curId === 0}" @click="curId=0">Home</a>
<a href="#" :class="{'cur':curId === 1}" @click="curId=1">About</a>
<a href="#" :class="{'cur':curId === 2}" @click="curId=2">Contact</a>
<a href="#" :class="{'cur':curId === 3}" @click="curId=3">MySpace</a>
</div>
<!-- 内容 -->
<div class="tab_content">
<!-- 根据curId的值显示div,分别对应 -->
<div v-show="curId===0">Home Content</div>
<div v-show="curId===1">About Content</div>
<div v-show="curId===2">Contact Content</div>
<div v-show="curId===3">MySpace Content</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script>
var v = new Vue({
el:'#tab',
data:{
curId:0
},
computed:{},
methods:{},
mounted:function(){}
})
</script>
</html>