title: Binding class to a boolean test in Vuejs
body: <p>I have a series of buttons (using vue-mdl) which act like a tab switcher, so there is the concept of the 'current' tab in view. I'd like to bind a class to the button which is 'active', but I haven't found a way of doing it without using a computed property. The computed property is trivial, and really just needs to compare the button id with the <code>currentView</code> data value. So far I've got this:</p>
  
  <pre><code>&lt;mdl-button id="accepted"   :class="{activeTab: isAccepted}"&gt;Accepted&lt;/mdl-button&gt;
  &lt;mdl-button id="rejected"   :class="{activeTab: isRejected}"&gt;Rejected&lt;/mdl-button&gt;
  &lt;mdl-button id="training"   :class="{activeTab: isTraining}"&gt;Training&lt;/mdl-button&gt;
  &lt;mdl-button id="config"     :class="{activeTab: isConfig}"&gt;Configuration&lt;/mdl-button&gt;
  &lt;mdl-button id="newsletter" :class="{activeTab: isNewsletter}"&gt;Newsletter&lt;/mdl-button&gt;
  
  // 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'
    }
  }
  </code></pre>
  
  <p>but I don't like it for various reasons - the button ids are in 2 places, lots of repetition of basically the same function, using a function at all, etc. Really, I'd like to write something like this:</p>
  
  <pre><code>&lt;mdl-button id="accepted" :class="{activeTab: id == this.currentView}"&gt;Accepted&lt;/mdl-button&gt;
  </code></pre>
  
  <p>but that's not valid Vue markup. Is there a way to do this without creating a function per button just to do the comparison?</p>