vue两个按钮切换_vue实现按钮切换图片

本文实例为大家分享了vue实现按钮切换图片的具体代码，供大家参考，具体内容如下

Tab选项卡

实现步骤

1、实现静态UI效果

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

2、基于数据重构UI效果

将静态的结构和样式重构为基于Vue模板语法的形式

处理事件绑定和js控制逻辑

设置基本样式

{

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 #ccc;

border-right: 1px solid #ccc;

cursor: pointer;

}

.tab ul li.active {

<