Rendering Lists in VueJs

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

by Kirubel Girma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <ul>
    <li v-for="item in inventory">
      {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
</div>

CSS

li {
  font-family: arial;
  color: white;
  border: .1em solid black;
  margin: 1em;
  background-color: cornflowerblue;
  padding: .5em .5em .5em 2em;
  float: left;
  
  animation: zoom 3s infinite;

}

@keyframes zoom {
    0%   {padding-top: 0px;}
    25%  {padding-top: 200px;}
    75%  {padding-top: 50px}
    100% {padding-top: 0px;}
}

JavaScript

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