效果:

html:

//  按钮
<div class="orderTab clearfix" @click="toggle()">
<div class="tab floatL" :class="actived==1?'tabActive':''">一楼</div>
<div class="tab floatL" :class="actived==2?'tabActive':''">二楼</div>
</div>
// 内容区
<div class="Box" v-show="actived == 1"></div>
<div class="Box" v-show="actived == 2"></div>

js:

//  data定义变量
actived: 1,
// 点击事件:
toggle () {
  if (this.actived === 1) {
    this.actived = 2
  } else {
    this.actived = 1
  }
},

css:

//  选中色:
.tab {
width: 37px;
height: 28px;
font-size: 12px;
line-height: 28px;
color: #ffffff;
text-align: center;
border-radius: 3px;
}
.orderTab {
margin: 12px .26rem 0;
width: 76px;
height: 30px;
background-color: #c9151e;
border-radius: 3px;
border: solid 1px #c9151e;
}
.floatL {
  float: left;
}
.clearfix:after { // 清除浮动
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  font-size: 0;
  height: 0;
}

tab切换 -- vue的更多相关文章

  1. vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  2. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  3. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  4. vue.cli实现tab切换效果

    <template> <div class="cp-select">                     <div class="lef ...

  5. VUE 实现tab切换页面效果

    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  7. vue实现tab切换

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...

  8. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  9. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

随机推荐

  1. iptbales无法正常重启

    新主机iptables无法启动关闭和重启 一般是由于没有配文件导致 解决办法 直接touch /etc/sysconfig/iptables 然后就可以正常启动. 备注:一般存在于centos6系列中

  2. LCD Common电压

    因为驱动液晶翻转靠的是两个玻璃电极上的电压差,而电压差是由电容提供的,电容一端接到S基,另一端接到一个基准电压上,这个电压就是Common电压.

  3. 「题解」:$Game$

    问题 B: $Game$ 时间限制: 1 Sec  内存限制: 256 MB 题面 题面谢绝公开. 题解 对于最初加入的每一个元素开桶记录出现次数. 然后记录一个前p个元素最大值. 先由先手玩家取走一 ...

  4. JavaScript中的浏览器对象模型

    浏览器对象模型 1.浏览器引入JavaScript 1.直接在HTML文件中引入 首先第1种方式就是直接在HTML文档里面引入JavaScript代码.在维护一些老项目的时候,经常 可以看到J ava ...

  5. python常用包及功能介绍

    1.NumPy数值计算 NumPy是使用Python进行科学计算的基础包,Numpy可以提供数组支持以及相应的高效处理函数,是Python数据分析的基础,也是SciPy.Pandas等数据处理和科学计 ...

  6. pywebview gui='cef' 生成app报错—— 中断点 已到达中断点

    pywebview是一个轻量级跨平台包装器,允许在其自己的本机GUI窗口中显示HTML内容.它提供了桌面应用程序中Web技术的强大功能,隐藏了GUI基于浏览器的事实.这个玩意儿好啊,可以直接让我们做的 ...

  7. Hibernate的一对一映射

    一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包,创建 hibernate.cfg.xml 文件,并配置,配置项如下 ...

  8. umount:将文件设备卸载

    [root@centos57 ~]# umount /dev/hda1 用设备文件名来卸载 [root@centos57 ~]# umount /aixi                     用挂 ...

  9. JS流程控制语句 重复重复(for循环)语句结构: for(初始化变量;循环条件;循环迭代) { 循环语句 }

    重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...

  10. 显示和隐藏(display属性)none或block

    显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...