用vue实现tab切换

用vue实现tab切换

html代码
<div id="app">
			<ul class="tab-tilte">
				<li @click="cur=0" :class="{active:cur==0}">html</li>
				<li @click="cur=1" :class="{active:cur==1}">css</li>
				<li @click="cur=2" :class="{active:cur==2}">JavaScript</li>
				<li @click="cur=3" :class="{active:cur==3}">vue</li>
			</ul>
			<div class="tab-content">
				<div v-show="cur==0">html</div>
				<div v-show="cur==1">css</div>
				<div v-show="cur==2">JavaScript</div>
				<div v-show="cur==3">vue</div>
			</div>
		</div>

vue代码

<script type="text/javascript">
			 new Vue({
				el: "#app",
				data: {
					cur: 0 //默认选中第一个tab 
				}
			})
		</script>

css代码

<style type="text/css">
			ul li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#app {
				width: 600px;
				height: 400px;
				margin: 0 auto;
				border: 1px solid #ccc;
			}
			.tab-tilte {
				width: 90%;
			}
			.tab-tilte li {
				float: left;
				width: 25%;
				padding: 10px 0;
				text-align: center;
				background-color: #cccccc;
				cursor: pointer;
			}
			/* 点击对应的标题添加对应的背景颜色 */
			.tab-tilte .active {
				background-color: #09f;
				color: #fff;
			}
			.tab-content div {
				float: left;
				width: 25%;
				line-height: 100px;
				text-align: center;
			}
		</style>

效果图