使用vue.js写一个tab选项卡效果
作者:勇PAN高峰 时间:2024-04-22 22:23:34
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢?
如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-active)是vue-router默认的类名,你可以自己配置更改名称.这样我们可以直接使用vue的路由功能当tab选项卡使用了.那么如果不想用路由功能呢?
那么请看下面的方法:
html部分
<div id="app">
<ul>
<li @click="toggle($index ,tab.view)" v-for="tab in tabs" :class="{active:active==$index}">
{{tab.type}}
</li>
</ul>
<component :is="currentView"></component>
</div>
js部分
Vue.component('child1', {
template: "<p>this is child1</p>"
})
Vue.component('child2', {
template: "<p>this is child2</p>"
})
new Vue({
el: "#app",
data: {
active: 0,
currentView: 'child1',
tabs: [
{
type: 'tab1',
view: 'child1'
},
{
type: 'tab2',
view: 'child2'
}
]
},
methods: {
toggle(i, v){
this.active = i
this.currentView = v
}
}
})
然后我们只需要设置一个.active的样式就可以了,比如设置一个最简单的
css
.active{
color:red
}
简易的vue.js tab 选项卡
原理很简单,我们给tab选项绑定了toggle方法,点击时让active等于其index,从而给其添加了一个active类,而显示的内容也是同样的原理.比起传统操作dom方法,这个整体看上去更简洁,不过麻烦在每个tab选项卡都是一个组件.
来源:http://www.jianshu.com/p/b521d33a540b#
标签:vue,tab,选项卡
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python判断字符串是否为空和null方法实例
2021-06-27 07:47:23
Python3.8对可迭代解包的改进及用法详解
2021-01-08 05:55:05
图片垂直居中的使用技巧
2008-05-28 12:45:00
Python 添加命令行参数步骤
2022-10-24 05:15:40
![](https://img.aspxhome.com/file/2023/3/80723_0s.png)
MySQL系列之十 MySQL事务隔离实现并发控制
2024-01-25 20:57:35
![](https://img.aspxhome.com/file/2023/0/118170_0s.png)
python 的 scapy库,实现网卡收发包的例子
2021-08-08 17:25:05
Oracle常见错误诊断
2010-07-27 12:56:00
Python pandas实现excel工作表合并功能详解
2021-05-23 01:33:40
![](https://img.aspxhome.com/file/2023/4/70064_0s.png)
Div的浮动+循环(描述的不清楚,请看图)
2008-09-22 20:21:00
![](https://img.aspxhome.com/file/UploadPic/20089/22/banner_85s.jpg)
python对文档中元素删除,替换操作
2023-08-30 11:28:20
Python求两点之间的直线距离(2种实现方法)
2021-03-28 19:24:46
Python基于pyecharts实现关联图绘制
2021-04-08 12:05:45
![](https://img.aspxhome.com/file/2023/7/80397_0s.png)
python机器学习Sklearn实战adaboost算法示例详解
2023-08-15 06:35:59
![](https://img.aspxhome.com/file/2023/9/109359_0s.jpg)
Linux安装MySQL教程(二进制分发版)
2024-01-15 03:24:02
![](https://img.aspxhome.com/file/2023/0/121250_0s.jpg)
利用Python将多张图片合成视频的实现
2022-09-16 07:10:26
![](https://img.aspxhome.com/file/2023/1/104841_0s.png)
浅析python继承与多重继承
2021-08-28 08:19:35
对网站内嵌gradio应用的输入输出做审核实现详解
2023-07-22 08:22:05
![](https://img.aspxhome.com/file/2023/9/62849_0s.jpg)
PHP查询快递信息的方法
2023-11-14 10:25:48
Python绘制数据图表的超详细教程
2021-03-05 01:54:36
![](https://img.aspxhome.com/file/2023/6/99176_0s.jpg)
Django之form组件自动校验数据实现
2023-09-25 16:43:33
![](https://img.aspxhome.com/file/2023/9/93869_0s.png)