用vue.js写一个制表符效果

通常，我们在编写tab tab时，通常使用jq来操作dom，从同一级元素中移除活动类，然后将活动类添加到被单击的元素中。但是在vue.js中，不操作dom就可以尽量不操作dom，那么如何实现呢？

如果你用过vue-router，你会发现vue-router在你使用的时候其实相当于一个标签。点击后，被点击的路由器链接元素默认会添加一个路由器链接活动类，我们只需要设置这个类的样式。(当然，Router-link-active)是vue-router的默认类名。您可以自己配置和更改名称。所以我们可以直接使用vue的路由功能作为tab。如果不想使用路由功能怎么办？

那么请看下面的方法：

Html部分

div ID=' app ' ul Li @ click=' toggle($ index，tab.view)' v-for=' tab中的tab ' : class=' { active 3360 active==$ index } ' { { tab . type } }/Li/ul component : is='。

Vue.component('child1 '，{ template: 'pthis是child 1/p ' })Vue.component(' child 2 '，{ template: 'pthis是child 2/p ' })new Vue({ El : ' # app '，data : { active : 0 0，currentView: 'child1 '，tab 3360[{ type : ' tab 1 '，View 3: ' child 1 ' })主动=我这个。currentview=v}})那么我们只需要设置一个。主动风格，比如设置最简单的一种。

钢性铸铁。活动{ color:red}简单vue.js选项卡选项卡

原理很简单。我们把toggle方法绑定到tab选项，点击时使active等于它的index，这样就给它增加了一个active类，显示的内容也是同样的原理。与传统的操作dom方法相比，这种整体看起来更简单，但麻烦的是每个选项卡都是一个组件。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。