Rendering Lists in VueJs

A demo of rendering lists in VueJs using the v-for directive - http://coligo.io

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue">
  <ul>
    <li v-for="item in inventory" :class="{item.price == 300 ? s : n}">
      {{ item.name }} - ${{ item.price  }} - {{item.price == 300 ? 'igual' : 'não' }}
    </li>
  </ul>
</div>

CSS

.s{
  color:red;
}
.n{
  color:blue;
}

JavaScript

new Vue({
  el: '#vue',
  data: {
    inventory: [
      {name: 'MacBook Air', price: 12000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
    ],
    
  }
  
});