Pnei Kedem Book Club

Online book club

by shootermv

HTML

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

<div id="app" class="container-fluid">
  <h1>{{ title }}</h1>

  
  <div class="row">
    <div class="col-xs-4 text-center"  v-for="book in books">
      <a href="#" class="thumbnail">
        <img v-bind:src="book.img" width="200" height="276" >
        <span>{{ book.title }}</span>
      </a>
    </div>
  </div>  

</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    title: 'Pnei Kedem Book Club',
    books: [
      { title: 'Tom Soyer' ,author:'Mark Twein', img:'//upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Tom_Sawyer_1876_frontispiece.jpg/200px-Tom_Sawyer_1876_frontispiece.jpg'},
      { title: 'Midnight Folk',author: 'John Masefield', img:'//upload.wikimedia.org/wikipedia/en/3/35/MidnightFolk.jpg'},
      { title: 'Emil From Leneberg' ,author:'Asterid Lindgren', img:'//upload.wikimedia.org/wikipedia/en/thumb/1/1c/Emil_i_L%C3%B6nneberga.jpg/190px-Emil_i_L%C3%B6nneberga.jpg'}
    ]
  }
})