<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<h1>Vue.js</h1>

<div id="contents">
  <device-template
                   v-for="device in devices"
                   v-bind:key="device.name"
                   v-bind:item="device">
  </device-template>
</div>
h1 {
  text-align:center;
}

#contents {
	display: inlie-table;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.device {
	width: 200px;
	height: 400px;
	display: table-cell;
	height: 300px;
}

.img-box {
	width: 150px;
	height: 200px;
	margin: 0 auto;
	margin-top: 20px;
	margin-left: 25px;
	margin-right: 25px;
	background-color: gray;
}

.device p{
	text-align: center;
}
View Compiled
Vue.component('device-template', {
  props: ['item'],
  template:
    '<div class="device" v-on:click="popups">' +
      '<div class="img-box">' +
      '</div>' +
      '<p>{{ item.name }}</p>' +
      '<p>{{ item.made }}</p>' +
      '<p>{{ item.price }}</p>' +
      '<p>{{ item.com }}</p>' +
    '</div>',
    methods: {
      popups: function() {
        alert("商品名: " + this.item.name +
              "\n製造: " + this.item.made +
              "\n値段: " + this.item.price +
              "\n特徴: " + this.item.com)
      }
    }
})

new Vue({
  el: '#contents',
  data: {
      devices: [
        { name: "ZZ01", made: "japan", price:"20,000", com:"新商品!"},
        { name: "ZZ02", made: "china", price:"22,000", com:"新商品!"},
        { name: "ZZ03", made: "china", price:"24,000", com:"ちょっと高い!"},
        { name: "ZZ04", made: "china", price:"21,000", com:"新商品!"},
        { name: "ZZ05", made: "canada", price:"10,000", com:"激安!"},
        { name: "ZZ06", made: "canada", price:"12,000", com:"安い!"},
        { name: "ZZ07", made: "japan", price:"23,000", com:"ちょっと高い!"},
        { name: "ZZ08", made: "china", price:"25,000", com:"ちょっと高い!"},
        { name: "ZZ09", made: "china", price:"31,000", com:"たかい!"},
        { name: "ZZ010", made: "japan", price:"32,000", com:"たかい!"}
      ]
    }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.