JSFiddle - React, Tailwind, and code Playground

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <h1>¡Identidades reales de superhéroes!</h1>
  <ul class="list-group">
    <li v-for="hero in heroes"
        class="list-group-item"
        >
      {{ hero | snitch }}
    </li>
  </ul>
</div>

JavaScript

Vue.filter('snitch', function (hero) {
  return '¡' + hero.secretId + ' es '
    + hero.firstname + ' '
    + hero.lastname + ' en la vida real!'
})

new Vue({
  el: '.container',
  data: {
    heroes:  [
      { firstname: 'Bruce', lastname:  'Wayne', secretId: 'Batman'},
      { firstname: 'Clark', lastname: 'Kent', secretId: 'Superman'},
      { firstname: 'Jay', lastname: 'Garrick', secretId: 'Flash'},
      { firstname: 'Peter', lastname: 'Parker', secretId: 'Spider-Man'}
    ]
  }
})