クルクル回るインフォカード「vue-info-card」

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-info-card.js"></script>
<div id="app">
  <info-card
     :front-title="front.title"
     :front-data="front.message"
     :back-title="back.title"
     :back-data="back.message"></info-card>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background-color:#d0d0d0;
}
#app {
  padding:25px;
}

Vue

const InfoCard  = window['vue-info-card'];

Vue.component('info-card', InfoCard);

let app = new Vue({
  el: '#app',
  data: {
    front: {
      title: '表面',
      message: '表面のメッセージはここに表示される',
    },
    back: {
      title: '裏面',
      message: '裏面のメッセージはここに表示される',
    }
  }
});