使用vue.js写一个tab选项卡效果


Posted in Javascript onMarch 25, 2017

通常我们写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 选项卡

使用vue.js写一个tab选项卡效果

原理很简单,我们给tab选项绑定了toggle方法,点击时让active等于其index,从而给其添加了一个active类,而显示的内容也是同样的原理.比起传统操作dom方法,这个整体看上去更简洁,不过麻烦在每个tab选项卡都是一个组件.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
vuex进阶知识点巩固
May 20 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 #Javascript
JS操作xml对象转换为Json对象示例
Mar 25 #Javascript
javascript实现的图片预览功能
Mar 25 #Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 #Javascript
bootstrap table动态加载数据示例代码
Mar 25 #Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 #Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 #Javascript
You might like
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python 处理数据的实例详解
2017/08/10 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python中turtle库的简单使用教程
2020/11/11 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
jQuery treeview树形结构应用
2021/03/24 jQuery
市场营销专业求职信
2014/06/17 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
PHP新手指南
2021/04/01 PHP
Golang获取List列表元素的四种方式
2022/04/20 Golang