list images vuejs

example vue js

by femfoyou

HTML

<div id="app">
  
<ul>
  <li v-for="poke in pokemons">
    <img src="http://fefro.hol.es/pokemons/pokes2/{{poke.num}}.png" alt="">
    <p>{{poke.num}}</p>
  </li>
</ul>


</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js'></script>

CSS

ul {list-style:none; margin:0;padding:0;overflow:hidden;}
li {float:left;}
li a,li img{display:inline-block;text-decoration:none;padding:10px;}
li p {text-align:center;}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
  
    pokemons : [
      {num: '196',num2:'196',nombre:'espeon', type1:'psychic', type2:''},
      {num: '149',num2:'149',nombre:'dragonite', type1:'dragon', type2:'flying'},
      {num: '143',num2:'143',nombre:'snorlax', type1:'normal', type2:''},
    ],
   // myImg : 'http://fefro.hol.es/pokemons/pokes2/'+poke.nombre+'.png',
  }
})