效果:

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. hashmap1.7的死锁模拟

    package com.cxy.springdataredis.hashmap; import javax.lang.model.element.VariableElement; import jav ...

  2. 7.springboot+mybatis+redis整合

    选择生成的依赖 选择保存的工程路径 查询已经生成的依赖,并修改mysql的版本 <dependencies> <dependency> <groupId>org.s ...

  3. Worker Thread等到工作来,来了就工作

    Worker是“工人”的意思,worker thread pattern中,工人线程(worker thread)会一次抓一件工作来处理,当没有工作可做时,工人线程会停下来等待心得工作过来. Work ...

  4. java日期格式汇总

    日期格式汇总 转载 2017年05月23日 17:22:25 DateFormat     java.text.DateFormat public abstract class DateFormat ...

  5. MongoDB使用固定集合

    MongoDB中的固定集合:大小是固定的,类似于循环队列,如果没有空间了,最老的文档会被删除以释放空间,新插入的会占据这块空间. 1.固定集合(oplog) oplog是一个典型的固定集合,因为其大小 ...

  6. Git 获取项目git clone

    git clone 克隆项目 git clone 实际上是一个封装了其他几个命令的命令. 它创建了一个新目录,切换到新的目录,然后 git init 来初始化一个空的 Git 仓库, 然后为你指定的 ...

  7. List、Map、Set 三个接口,存取元素时,各有什么特点

    List与Set都是单列元素的集合,它们有一个功共同的父接口Collection. Set里面不允许有重复的元素, 存元素:add方法有一个boolean的返回值,当集合中没有某个元素,此时add方法 ...

  8. php curl的正确使用方法

    在做一个读取远程抓取数据并显示的demo的时候,遇到了以下几个问题: 1.用的curl变量进行了多定义 2.抓取远程数据时没有返回正确的json数据 没有返回正确的json数据不是因为网站提供的接口问 ...

  9. js面试总结2

    原型和原型链: 题目,知识点,解答: 1.如何准确地判断一个变量是数组类型 2.写一个原型链继承的例子 3.描述new一个对象的过程 4.zepto(或其他框架)源码中如何使用原型链. 知识点 构造函 ...

  10. C++调用JS,JS调用C++

    JS调用C++,通过设置DIID_HTMLDocumentEvents事件,来捕获HTMLWINDOW上的事件,再通过事件对象的get_srcElement得到事件源,从而得到指定元素对象,从而获取元 ...