タブの表現はよく見かけるので、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を使っています。
隠れているコンテンツを表示させる構造ではなく、データとして持っている情報を入れ替える仕組みになっています。
