tab切换 -- vue
效果:
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>
// 内容区
js:
// data定义变量
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;
}
tab切换 -- vue的更多相关文章
- vue + element-ui 制作tab切换(切换vue组件,踩坑总结)
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- vue.cli实现tab切换效果
<template> <div class="cp-select"> <div class="lef ...
- VUE 实现tab切换页面效果
一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- vue实现tab切换
需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...
- vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式
最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
随机推荐
- iptbales无法正常重启
新主机iptables无法启动关闭和重启 一般是由于没有配文件导致 解决办法 直接touch /etc/sysconfig/iptables 然后就可以正常启动. 备注:一般存在于centos6系列中
- LCD Common电压
因为驱动液晶翻转靠的是两个玻璃电极上的电压差,而电压差是由电容提供的,电容一端接到S基,另一端接到一个基准电压上,这个电压就是Common电压.
- 「题解」:$Game$
问题 B: $Game$ 时间限制: 1 Sec 内存限制: 256 MB 题面 题面谢绝公开. 题解 对于最初加入的每一个元素开桶记录出现次数. 然后记录一个前p个元素最大值. 先由先手玩家取走一 ...
- JavaScript中的浏览器对象模型
浏览器对象模型 1.浏览器引入JavaScript 1.直接在HTML文件中引入 首先第1种方式就是直接在HTML文档里面引入JavaScript代码.在维护一些老项目的时候,经常 可以看到J ava ...
- python常用包及功能介绍
1.NumPy数值计算 NumPy是使用Python进行科学计算的基础包,Numpy可以提供数组支持以及相应的高效处理函数,是Python数据分析的基础,也是SciPy.Pandas等数据处理和科学计 ...
- pywebview gui='cef' 生成app报错—— 中断点 已到达中断点
pywebview是一个轻量级跨平台包装器,允许在其自己的本机GUI窗口中显示HTML内容.它提供了桌面应用程序中Web技术的强大功能,隐藏了GUI基于浏览器的事实.这个玩意儿好啊,可以直接让我们做的 ...
- Hibernate的一对一映射
一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包,创建 hibernate.cfg.xml 文件,并配置,配置项如下 ...
- umount:将文件设备卸载
[root@centos57 ~]# umount /dev/hda1 用设备文件名来卸载 [root@centos57 ~]# umount /aixi 用挂 ...
- JS流程控制语句 重复重复(for循环)语句结构: for(初始化变量;循环条件;循环迭代) { 循环语句 }
重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...
- 显示和隐藏(display属性)none或block
显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...