title: change class conditionally vue.js
body: <p>I have a table and I want to change the class depending on the value. </p>
  
  <p>My first approach was to use <code>v-bind:class="{}</code> this will change to the right class if true. However doing like this I should create new elements for each value on my table which doesn't look like the best option. </p>
  
  <p>Is there a way to use conditionals, like <code>if {{value}} &gt; 5 class:something</code></p>
  
  <p>I wrote a small <a href="https://jsfiddle.net/cosbgn/yzhfhr6s/1/" rel="nofollow noreferrer">jsfiddle</a> with how I got it working right now. The idea is that each element in the table will follow these rules without the need of write an if statement for each cell: </p>
  
  <pre><code>  if (this.v1 &lt; 4) {
      this.goodBox = true
    } else if (this.v1 &lt; 6) {
      this.goodBox = true
    } else {
      this.badBox = true
    }
  </code></pre>