Vue实现简单选项卡

<!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>
Vue实现简单选项卡

猜你喜欢
