Vue.Js 中的选项卡式导航

Question

我正在尝试使用 Vue 创建一个基本的选项卡式导航系统。我正在捕获用户的导航选择并调用一个更改特定数据的函数。该数据最终将决定哪个选项卡应该处于活动状态。到目前为止我有这个：

HTML

<div id="app">
    <div id="nav">
        <a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a>
        <a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a>
    </div>
    <div class="content">
        <div class="boxes" id="home" v-bind:class="choice">
        </div>
        <div class="boxes" id="info" v-bind:class="choice">
        </div>
    </div>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        choice: 'homeActive' // Home is chosen by default
    },
    methods: {
        makeActive: function(val) {
            this.choice = val;
        }
    }
});

目前，如果用户点击主页 link，主页和信息 div 都会变为 homeActive class，这是因为我无法管理 return 两个语句用我的方法和这个基本逻辑：

启用 tab1 并禁用 tab2 ||启用选项卡 2 并禁用选项卡 1

我正在尝试不同的方法，但由于将我的内容绑定到单个 class。

，我只能影响具有调用方法的单个状态

关于如何使用 Vue 进行此操作有什么建议吗？

Answer 1

我通常解决这个问题的方法是添加另一个函数 isActiveTab 就像这样...

new Vue({
    el: '#app',
    data: {
        choice: 'homeActive' // Home is chosen by default
    },
    methods: {
        makeActive: function(val) {
            this.choice = val;
        },
        isActiveTab: function(val) {
          return this.choice === val;
        }
    }
});

那么在你看来...

<div id="app">
    <div id="nav">
        <a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a>
        <a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a>
    </div>
    <div class="content">
        <div class="boxes" id="home" v-show="isActiveTab('homeActive')">
        </div>
        <div class="boxes" id="info" v-show="isActiveTab('infoActive')">
        </div>
    </div>
</div>

Vue.Js 中的选项卡式导航

Tabbed navigation in Vue.Js

javascript

vue.js

vuejs2