VueJS Lists

by Plínio Naves

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

  <h2>Arrays</h2>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
  </ul>
  
  <h2>Objetos</h2>
  <ul>
    <li v-for="(value, key, index) in myObject">
      {{ index }} - {{ key }}: {{ value }}
    </li>
  </ul>
  
  <h2>Computed Filter</h2>
  <ul>
    <li v-for="n in evenNumbers">{{ n }}</li>
  </ul>
  
  <h2>VFor with Range</h2>
  <ul>
    <li v-for="n in 10">{{ n }}</li>
  </ul>
  
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	parentMessage: 'Pai',
  	items: [
      { id: 1, message: 'Algo' },
      { id: 2, message: 'Outro' }
    ],
    myObject: {
      firstName: 'Zé',
      lastName: 'Ninguém',
      age: 30
    },
    numbers: [ 1, 2, 3, 4, 5, 6, 7 ]
  },
  computed: {
  	evenNumbers: function() {
    	return this.numbers.filter(n => n % 2 === 0);
    }
  }
});