title: Proper way to express switch statement with Vue data bindings
body: <p>I have a simple use case for a range input that changes a button's text whenever the range's value changes. I'm using Vue.js to bind data from an object that is simply storing the range value, and spitting it back out to the button (and the counter, for easier debugging).</p>
  
  <p>In the following fiddle, when the range value is greater than 0, the text reads "Buy", or else it reads "Sell".</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/svwa79pe/1/" rel="nofollow noreferrer">http://jsfiddle.net/svwa79pe/1/</a></p>
  
  <p><a href="https://i.stack.imgur.com/F6FaQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F6FaQ.png" alt="positive-state"></a>
  <a href="https://i.stack.imgur.com/cWfuu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cWfuu.png" alt="negative-state"></a></p>
  
  <p>What I want to do is show three button states depending on whether the range value is positive, negative, or zero. I can use Vue handlebar / mustache syntax to create a ternary expression, but I can't figure out how cover the third state. What I need is closer to a switch statement than ternary, but I can't seem to find an analog to that within Vue's documentation.</p>
  
  <ul>
  <li>Does Vue contain a tool for this kind of logic that I don't know about?</li>
  <li>Should I just handle this with a custom method that fires on the range change?</li>
  <li>Am I just using the Vue template incorrectly? Is there a better way to do this with attributes or something?</li>
  </ul>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;span&gt;
      &lt;button disabled="true"&gt;{{ item.delta }}&lt;/button&gt;
    &lt;/span&gt;
    &lt;input type="range" v-model="item.delta" value="0" v-bind:max="item.stock" v-bind:min="0 - item.loot"&gt;
    &lt;span class="exchange"&gt;
      &lt;button&gt;
        {{ (item.delta &gt; 0) ? "Buy" : "Sell" }}
      &lt;/button&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var stats = {
      item : {
      price : 10,
      stock : 20,
      loot : 5,
      delta : 0
    }
  }
  var app = new Vue({
          el: '#app',
          data: stats
  });
  </code></pre>