用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>
效果图