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的判断 数据驱动
随机推荐
- Python基础-字符串的使用
基础知识 字符串解释:字符串是不可变的,所有元素赋值和切片赋值操作都是非法的,属于序列一种(字符串.元组.列表). 一.格式化字符串 (1).format()方法==str.format() 作用:将 ...
- 浅谈UWB（超宽带）室内定位技术（转载）
技术背景 随着无线通信技术的发展和数据处理能力的提高,基于位置的服务成为最有前途的互联网业务之一.无论移动在室内还是室外环境下,快速准确地获得移动终端的位置信息和提供位置服务的需求变得日益迫切.通信和 ...
- POJ：3273-Monthly Expense
Monthly Expense Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 32067 Accepted: 12081 Des ...
- Java线程和多线程（七）——ThreadLocal
Java中的ThreadLocal是用来创建线程本地变量用的.我们都知道,访问某个对象的所有线程都是能够共享对象的状态的,所以这个对象状态就不是线程安全的.开发者可以通过使用同步来保证线程安全,但是如 ...
- P2680 运输计划（二分+树上差分）
P2680 运输计划 链接 分析: 二分+树上差分. 首先可以二分一个答案,那么所有比这个答案大的路径,都需要减去些东西才可以满足这个答案. 那么减去的这条边一定在所有的路径的交集上. 那么如果求快速 ...
- 使用Autofac实现依赖注入注入
依赖注入是什么意思? 依赖倒置 在软件设计原则中,有一种重要的思想叫做依赖倒置.它的核心思想是:不能让高层组件依赖底层组件,而且,不管高层组件和底层组件,两者都应依赖于抽象.那么,这个原则和我们上面的 ...
- 《Cracking the Coding Interview》——第9章：递归和动态规划——题目7
2014-03-20 03:35 题目:实现画图的Flood Fill操作. 解法:DFS和BFS皆可,但BFS使用的队列在时间复杂度上常数项比较大,速度略慢,所以我选了DFS.当然,如果图很大的话D ...
- swift中的正则表达式
swift中的t正则表达式 正则表达式是对字符串操作的一种逻辑公式,用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串" ...
- Nodejs的那些事
前言: Node.js实际上是算是个前端开发,但是我们要做APP自动化涉及到 node.js ,也需要它来帮我们安装一些 packing 一.Node.js安装 1.安装Node.js:立即下载 2. ...
- Metadata 的概念
https://www.ibm.com/developerworks/cn/cloud/library/1509_liukg_openstackmeta/ http://mathslinux.org/ ...