Vue实现Tab选项卡切换 Vue实现Tab选项卡切换

本文实例为大家分享了Vue实现Tab选项卡切换的具体代码，供大家参考，具体内容如下
点击不同的标题显示出相应的图片
代码如下

Document - 锐客网*{margin: 0px; padding: 0px; }#tab{width:420px; margin: 20px auto; position: relative; }#tab ul li{width: 100px; height: 30px; border: 1px solid #6699CC; float: left; list-style: none; text-align: center; line-height: 30px; }#tab ul li:first-child{border-right: none; /* border-radius: 10px 0px 0px 0px; */}#tab ul li:last-child{border-left: none; /* border-radius: 0px 10px 0px 0px; */}#tab ul .active{background-color:orange; color:white; }#tab div{width: 415px; position: absolute; top: 32px; display: none; }#tab div img{width: 350px; /* border-radius:0px 0px 10px 10px; */}#tab div.current{display: block; }
{{item.text}}

文章图片