Loop based Templating using Vue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div id="app">
  <div class="card" v-for="card in cards">
    
      <!-- You can see the templating used below -->
      <div v-if="card.id == idx">
        <h4 class="card-title">{{card.cardTitle}}</h4>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">{{card.cardText}}</p>
        <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardLink}}</a>
        <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardAnotherLink}}</a>
      </div>  
    </div>
  
</div>

JavaScript

var contacts = [{
  cardTitle: 'John Doe',
  cardText: 'Hello I am a regular visitor of The Web Juice',
  cardLink: 'Profile',
  cardAnotherLink: 'Share',
  id: 0
}, {
  cardTitle: 'Rebecca Doe',
  cardText: 'Rather I will say I am not into this anymore.',
  cardLink: 'Profile',
  cardAnotherLink: 'Share',
  id: 1
}, {
  cardTitle: 'Loreal Doe',
  cardText: 'Lets chat about the site',
  cardLink: 'Profile',
  cardAnotherLink: 'Share',
  id: 2
}];
var app = new Vue({
  el: '#app',
  data: {
    cards: contacts,
    idx: 1
  }
});