list images vuejs

example vue js

by femfoyou

HTML

<script src="https://use.fontawesome.com/b4a35c5382.js"></script>

<div id="app">
<input type="range" min="12" max="90" name="fontSize" v-model="fontSizeSlider" :change="increaseFontSize">
<p style="font-size:{{fontSizeSlider}}px">palabra</p>
<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 class="star rating">
      <i class="fa fa-star-o"></i>
</div>
    
</div>

CSS

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

.star,.rating {font-size:32px;}
.rating > i.fa.fa-star-o:hover:before {
   content: "\f005";
   color: #FFC107;
   cursor: pointer;
}

JavaScript

//  <img src="'http://fefro.hol.es/pokemons/pokes2/'+poke.num+'.png'" alt=""/>

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',
  }
})