使用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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 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+dbfile开发小型留言本
2006/10/09 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php Session无效分析资料整理
2016/11/29 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
详解Django框架中的视图级缓存
2015/07/23 Python
python如何查看系统网络流量的信息
2016/09/12 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python获取引用对象的个数方式
2019/12/20 Python
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
提档介绍信范文
2015/10/22 职场文书