v-visible demo

Demo for the v-visible directive: https://github.com/javisperez/vuevisible

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/vue-visible@1.0.1"></script>
<h1>Vue-visible example</h1>
<h3>v-visible directive for Vue</h3>

<div id="app"></div>

CSS

.card {
  padding: 20px;
  background: #FFF;
  box-shadow: 1px 1px 10px #ddd;
  display: inline-block;
  margin: 20px;
  font-size: 18px;
  text-align: center;
}

.card .content {
  padding: 10px;
  border-radius: 4px;
  background: #EDEDED;
  margin-bottom: 10px;
}

Babel + JSX

console.log(window.Vue);
new Vue({
  el: '#app',

  created() {
    for (let i = 0, l = 10; i < l; i++) {
      this.cards.push({
        visible: true,
        type: ['show', 'visible'][i % 2]
      });
    }
  },

  data: {
    cards: []
  },

  methods: {
    toggle(card) {
      card.visible = !card.visible;
    }
  },

  template: `<div>
        <div class="card" v-for="card in cards">
            <div class="content" v-if="card.type === 'show'" v-show="card.visible">This is with v-show</div>
            <div class="content" v-if="card.type === 'visible'" v-visible="card.visible">This is with v-visible</div>
            <span class="btn btn-primary" @click="toggle(card)">Toggle</span>
        </div>
    </div>`
});