通过Vue实现简单的Tab切换
实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的。Tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构
标题一
标题二
标题三
标题四
内容一
内容二
内容三
内容四
Tab切换第二步写上对应的css样式
*{
margin:0;
padding:0;
}
#App {
width: 600px;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
}
ul li {
margin: 0;
padding: 0;
list-style: none;
}
.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;
}
Tab切换第三步引入vue实现
标题一
标题二
标题三
标题四
内容一
内容二
内容三
内容四
var app = new Vue({
el: "#app",
data: {
cur:0 //默认选中第一个tab
}
});
效果图: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200924134735202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NydXNoX0lu,size_16,color_FFFFFF,t_70#pic_center)
Tab切换效果改进与优化
(1) 以上代码看起来似乎很简单容易懂,而且效果也能实现,但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值,因此我们有必要改进一下代码的写法。 (2)利用vue提供的v-for指令遍历得到索引和值 如下所示:
{{title}}
{{m}}
window.onload = function(){
var app = new Vue({
el:'#app',
data:{
tabTitle: ['标题一', '标题二', '标题三', '标题四'],
tabMain: ['内容一', '内容二', '内容三', '内容四'],
cur: 0 //默认选中第一个tab
}
})
}
最终效果图如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200924134855439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NydXNoX0lu,size_16,color_FFFFFF,t_70#pic_center)
|