Vue.js实现tab切换效果
利⽤Vue实现简易tab切换效果
1.1 在我们平时浏览⽹站的时候，经常看到的特效有图⽚轮播、导航⼦菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出⼀些简单的
js实现轮播图最简代码
特效。
1.2 实现思路是点击上⽅的标题，下⽅的内容随之发⽣改变，上⽅和下⽅⽤的是两个块，是兄弟节点，所以需要点击tab标题和下⽅内容⼀⼀对应，基予
两个模块若下标相同是⼀个内容实现的。
1.3 tab切换第⼀步先要把HTML写好，这个第⼀步很关键，主要分为两块结构
<div id="app">
<ul class="tab-tilte">
<li>标题⼀</li>
<li>标题⼆</li>
<li>标题三</li>
<li>标题四</li>
</ul>
<div class="tab-content">
<div>内容⼀</div>
<div>内容⼆</div>
<div>内容三</div>
<div>内容四</div>
</div>
</div>
1.4 tab切换第⼆步写上对应的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:#f4f4f4;
cursor: pointer;
}
/* 点击对应的标题添加对应的背景颜⾊ */
.tab-tilte .active{
background-color: #09f;
color: #fff;
}
.tab-content div{
float: left;
width: 25%;
line-height: 100px;
text-align: center;
}
</style>
1.5tab切换第三步引⼊vue实现
<body>
<div id="app">
<ul class="tab-tilte">
<li @click="cur=0" :class="{active:cur==0}">标题⼀</li>
<li @click="cur=1" :class="{active:cur==1}">标题⼆</li>
<li @click="cur=2" :class="{active:cur==2}">标题三</li>
<li @click="cur=3" :class="{active:cur==3}">标题四</li>
</ul>
<div class="tab-content">
<div v-show="cur==0">内容⼀</div>
<div v-show="cur==1">内容⼆</div>
<div v-show="cur==2">内容三</div>
<div v-show="cur==3">内容四</div>
</div>
</div>
<script src="./js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
cur:0//默认选中第⼀个tab
}
});
</script>
</body>
效果图：
1.6tab切换效果改进与优化
（1）以上代码看起来似乎很简单容易懂，⽽且效果也能实现，但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值，因此我们有必要改进⼀下代码的写法。
（2）利⽤vue提供的v-for指令遍历得到索引和值如下所⽰：
<div id="app">
<!-- 推荐这种写法-->
<ul class="tab-tit">
<li v-for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}</li>
</ul>
<div class="tab-content">
<div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
tabTitle: ['标题⼀', '标题⼆', '标题三', '标题四'],
tabMain: ['内容⼀', '内容⼆', '内容三', '内容四'],
cur: 0//默认选中第⼀个tab
}
})
}
</script>
最终效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。