Condition based Templating using Vue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div>
  <b-card title="Card Title"
          img-src="https://picsum.photos/600/300/?image=25"
          img-alt="Image"
          img-top
          tag="article"
          style="max-width: 20rem;"
          class="mb-2">
    <p class="card-text">
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </p>
    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

JavaScript

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