vue实现选项卡案例 vue实现选项卡案例

本文实例为大家分享了vue实现选项卡案例的具体代码，供大家参考，具体内容如下

文章图片

实现步骤实现静态UI效果

用传统的方式实现标签结构和样式

【vue实现选项卡案例】基于数据重构UI效果

将静态的结构和样式重构为基于Vue模板语法的形式
处理事件绑定和js控制逻辑

声明式编程

模板的结构和最终显示的效果基本一致

我们先把每组数据作为对象存储在数组中

list: [{id: 1,title: 'apple',path: 'images/苹果.jpg'}, {id: 2,title: 'orange',path: 'images/橘子.jpg'}, {id: 3,title: 'lemon',path: 'images/柠檬.jpg'}]

然后通过v-for对这个数组进行遍历，取到对应的title值

{{item.title}}

对图片也进行遍历

文章图片

具体代码如下

Document.tab ul {overflow: hidden; padding: 0; margin: 0; }.tab ul li {box-sizing: border-box; padding: 0; float: left; width: 100px; height: 45px; line-height: 45px; list-style: none; text-align: center; border-top: 1px solid blue; border-right: 1px solid blue; border-bottom: 1px solid blue; cursor: pointer; }.tab ul li:first-child {border-left: 1px solid blue; }.tab ul li.active {background-color: orange; }.tab div {width: 500px; height: 300px; display: none; text-align: center; font-style: 30px; line-height: 300px; border: 1px solid blue; border-top: 0px; }.tab div.current {margin-top: 0px; width: 300px; height: 300px; display: block; }img {width: 300px; height: 300px; }
{{item.title}}

文章图片

文章图片