Question

我有一系列按钮（使用vue-mdl），它们就像一个标签切换器，所以在视图中有“当前”标签的概念。我想将一个类绑定到“活动”的按钮，但我没有找到一种方法，不使用计算属性。计算属性是微不足道的，实际上只需要将按钮id与currentView数据值进行比较。到目前为止，我有这个：

<mdl-button id="accepted"   :class="{activeTab: isAccepted}">Accepted</mdl-button>
<mdl-button id="rejected"   :class="{activeTab: isRejected}">Rejected</mdl-button>
<mdl-button id="training"   :class="{activeTab: isTraining}">Training</mdl-button>
<mdl-button id="config"     :class="{activeTab: isConfig}">Configuration</mdl-button>
<mdl-button id="newsletter" :class="{activeTab: isNewsletter}">Newsletter</mdl-button>

// Computed properties
computed: {
  isAccepted: function () {
    return this.currentView == 'accepted'
  },
  isRejected: function () {
    return this.currentView == 'rejected'
  },
  isTraining: function () {
    return this.currentView == 'training'
  },
  isConfig: function () {
    return this.currentView == 'config'
  },
  isNewsletter: function () {
    return this.currentView == 'newsletter'
  }
}

但我不喜欢它有各种各样的原因 - 按钮ID在2个位置，大量重复基本相同的功能，完全使用功能等等。真的，我想写这样的东西：

<mdl-button id="accepted" :class="{activeTab: id == this.currentView}">Accepted</mdl-button>

但这不是有效的Vue标记。有没有办法在不创建每个按钮的功能的情况下进行比较？

Answer 1

这就是循环的用途。使用v-for指令：

<mdl-button v-for="tab in tabs"
            :class="{ activeTab: currentView == tab }"
            :id="tab"
>{{ tab | capitalize }}</mdl-button>

然后只需将capitalize过滤器添加到您的父组件：

{
    data () {
        return {
            tabs: [
                'accepted',
                'rejected',
                'training',
                'config',
                'newsletter',
            ]
        };
    },
    filters: {
        capitalize (value) {
            return value[0].toUpperCase() + value.slice(1);
        }
    }
}

这是一个小小的动作：https://jsfiddle.net/xLxzwLo0/

将类绑定到Vuejs中的布尔测试

1 个答案: