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

2019-11-19 17:02:12

字体：大中小

来源：转载

供稿：网友

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