html选项卡_同一原理用Vue实现的Tab选项卡不操作DOM就是好

Tab选项卡网页特效，是我们写页面时经常用到的，下面的这两个效果是一样的，原理都是利用索引值来做的，样子很简单没花很多时间去美化下，凑合着看吧。第一个用jQuery实现的，第二个用vue实现，就是不用操作Dom了，逻辑代码就一个索引值的事，我感觉还是vue实现的更简单吧。

1.jQuery实现的Tab选项卡，代码如下：

用jQuery实现tab选项卡

菜单一菜单二菜单三菜单四

内容一

内容二

内容三

内容四

效果预览：http://tangjiusheng.com/d/demo/jquery-tab

2.Vue实现的Tab选项卡，代码如下：

用Vue实现tab选项卡

{{item.title}}

{{item.text}}

效果预览：http://tangjiusheng.com/d/demo/vue-tab

原文地址：http://tangjiusheng.com/vue/180.html