用途
新着
履歴
分類

VueJS タブ切り替え

VueJS タブ切り替え
クリックしてコンテンツが切り替わる表現のサンプルです。

タブの表現はよく見かけるので、VueJSでもサンプルを実装してみました。

デフォルトは一番左のコンテンツが表示され、タブをクリックすると、コンテンツが入れ替わります。

{{ item.title }}
{{current_tab}}:{{ items[current_tab].body }}

クリックされたタブは、次のアクセスでも同じものが開くようクッキーに保存されてます。

HTMLはこちら


<div id="demo_app">
  <div class="demo_flex">
    <div class="demo_tab-title" :class="checkAct(index)" v-for="(item, index) in items"  @click="changeTab(index)">{{ item.title }}</div>
  </div>
  <div class="demo_tab-body" v-cloak>{{current_tab}}:{{ items[current_tab].body }}</div>
</div>

JSはこちら


var demo_app = new Vue({
  el: '#demo_app',
  data: {
    current_tab: 0 ,
    items: [
      {
        title:'Vue.JS',
        body:'Vue.JSのタブのサンプルです。',
      },
      {
        title:'クリック',
        body:'タブをクリックするとコンテンツが切り替わります。',
      },
      {
        title:'記憶',
        body:'クリックした状態はクッキーに保存されます。',
      } 
    ] 
  },
  mounted: function () {
	this.current_tab = this.$cookies.get("vue_mytab") || '';
  },
  methods: {
    changeTab: function (index) {
        this.current_tab = index;
        this.$cookies.set("vue_mytab",index,60 * 60 * 24);
      },
    checkAct: function(index){
      a = '';
      if(this.current_tab == index){
        a = 'act';
      }
      return a;
    }
  }
})

プラグインのvue-cookies.jsを使っています。

隠れているコンテンツを表示させる構造ではなく、データとして持っている情報を入れ替える仕組みになっています。

CSSは参考まで

.demo_flex{
  display:flex;
}
.demo_tab-title{
  margin:5px 5px 0 0;
  padding: 5px 12px;
  background-color: #999;
  color: #EEE;
  cursor: pointer;
  border-radius:10px 0 0 0 ;
}
.demo_tab-title.act{
  color: #097;
  font-weight: bold;
  background-color: #CCC;
 }
.demo_tab-body{
  background-color: #CCC;
  padding: 20px 10px;
}
コード選択
公開 2019-07-28 16:08:19
このページの二次元コード
VueJS タブ切り替え

人気のサンプル

search -  category -  about
© 2024 kipure
Top