[Vue.js] Tab Panel

Tab panel implementation via Vue.js and CSS. The tab panel here is similar to Bootstrap tab. Click the following tabs to see the demo.

My home

My profile

My messages

My settings

The following is the source code for above demo.

HTML:

<div id="vueapp">

<div>

  <!-- Nav tabs -->
  <ul class="nav-tabs">
    <li><a v-on:click="tabsel = 'home'">Home</a></li>
    <li><a v-on:click="tabsel = 'profile'">Profile</a></li>
    <li><a v-on:click="tabsel = 'messages'">Messages</a></li>
    <li><a v-on:click="tabsel = 'settings'">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane" v-show="tabsel == 'home'">My home</div>
    <div class="tab-pane" v-show="tabsel == 'profile'">My profile</div>
    <div class="tab-pane" v-show="tabsel == 'messages'">My messages</div>
    <div class="tab-pane" v-show="tabsel == 'settings'">My settings</div>
  </div>

</div>

</div>

<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>

We use the variable tabsel to indicate current selected tab. When users click on the tab, update tabsel and hence show the selected tab pane according to the value of tabsel.

JavaScript:

'use strict';

var app = new Vue({
  el: '#vueapp',
  data: {
    tabsel: "home"
  }
});

Set tabsel to home in the initialization phase to make the home tab as default tab.

CSS:

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  list-style: none;
}
.nav-tabs > li {
  margin-bottom: 1px;
  margin-right: 1rem;
  line-height: 2rem;
}
.nav-tabs > li > a {
  cursor: pointer;
  text-decoration: none;
}
.tab-pane {
  padding: 1rem;
}

Use flexbox to align the tabs in one row.

Tested on:

Chromium 58.0.3029.96 Built on Ubuntu 17.04 (64-bit)
Vue.js 2.3.3

References:

[1]	bootstrap/_nav.scss at v4-dev · twbs/bootstrap · GitHub

[2]	Class and Style Bindings — Vue.js