vue实现tab切换
需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<style>
.active{
background: #eee;
}
.tabs{
width: 200px;
height: 20px;
font:0;
padding:0;
}
.li-tab{
width: 50%;
height: 100%;
display:inline-block;
text-align: center;
}
.divTab{
width: 200px;height: 300px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul class="tabs">
<li class="li-tab" v-for="(item,index) in tabsParam"
@click="toggleTabs(index)"
:class="{active:index!=nowIndex}">{{item}}</li>
</ul>
<div class="divTab" v-show="nowIndex===0">我是tab1</div>
<div class="divTab" v-show="nowIndex===1">我是tab2</div>
</div>
</body>
</html>
<script>
var app=new Vue({
el:'#app',
data:{
tabsParam:['tab1','tab2'],//（这个也可以用对象key，value来实现）
nowIndex:0,//默认第一个tab为激活状态
},
methods:{
toggleTabs:function(index){
this.nowIndex=index;
},
}
})
</script> 实现效果如下：
感谢原作者
https://segmentfault.com/a/1190000008939610
vue实现tab切换的更多相关文章
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- vue封装tab切换
vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- VUE 实现tab切换页面效果
一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- Vue如何tab切换高亮最简易方法
以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...
- vue实现tab切换功能精简版
<template> <div> <p class="tabs" v-for="(list,index) in lists" :c ...
- vue之tab切换
<style> .active{ color: red; } div a{ display: block; } </style> <script src="ht ...
- vue类似tab切换的效果，显示和隐藏的判断。
两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动
随机推荐
- Linux编译移植Qt4的环境_在OMAPL138平台
Linux编译Qt4的环境_OMAPL138 手里有一块创龙OMAPL138的板子,我要在上面成功移植Qt环境和触摸屏幕,这是我第二次进行Linux的Qt环境移植,发现了很多问题,需要重新整理. 我编 ...
- ElasticSearch 环境安装
1)官网安装教程: http://www.elasticsearch.org/guide/reference/setup/installation/ 2)简单安装: http://log.medc ...
- java线程安全（单例模式）（转载）
原文链接:http://www.jameswxx.com/java/%E8%AF%B4%E8%AF%B4%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/ 单例模式?多么简单! ...
- Java语言基础---变量与数据类型
变量的作用域 java用一对大括号“{}”作为语句块的范围,称为作用域.作用域中的变量不能重复定义:离开作用域,变量所分配的内存空间将被JVM所收回. 基本数据类型的包装类 java为基础数据类型提供 ...
- 玩转Linux之内存管理-free
玩转Linux之内存管理-free free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之 ...
- 【Neural Network】林轩田机器学习技法
首先从单层神经网络开始介绍 最简单的单层神经网络可以看成是多个Perception的线性组合,这种简单的组合可以达到一些复杂的boundary. 比如,最简单的逻辑运算AND OR NOT都可以由多 ...
- Python爬虫教程
Python爬虫(1):基本原理 Python爬虫(2):Requests的基本用法 Python爬虫(3):Requests的高级用法 Python爬虫(4):Beautiful Soup的常用方法 ...
- .gitignore 中文文件夹无效
有个文件夹名如:测试 在.gitignore中添加 /测试/ 但运行命令git status后发现还是被追踪到了 一番搜索后终于发现.gitignore文件编码是GBK的,重新将文件保存成utf ...
- Java基础-5运算符
一).算数运算符: 算术运算符的功能是做各种算术运算,其操作数可以是字符型.整型或浮点型数据. 运算符 运算 示例 结果 备注 + 加 5+5 10 - 减 4-2 2 * 乘 2*3 6 既 ...
- ironic baremetal node rescue/unrescue mode
环境ironic-api ironic-conductor,ironicclient均升级为Queens版本 官网说明API版本为1.38才支持rescue/unrescue,所以修改下openrc文 ...