<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h1>Vue.js</h1>
<div id="contents">
<device-template></device-template>
<device-template></device-template>
<device-template></device-template>
</div>
h1 {
text-align:center;
}
#contents {
margin: 0;
padding: 0;
}
.device {
margin: 0 auto;
width: 200px;
height: 350px;
border: solid 1px;
margin-bottom: 20px;
}
.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
const Devices = {
template:
'<div class="device" v-on:click="popups">' +
'<div class="img-box">' +
'</div>' +
'<div class="info-box">' +
'<p>Name : {{ name }}</p>' +
'<p>price : {{ price }}</p>' +
'<p>end : {{ end }}</p>' +
'</div>' +
'</div>',
data: function() {
return {
name: "Big Campain",
price: "$ -10",
end: "2018/06/01"
}
},
methods: {
popups: function() {
alert("name : " + this.name +
"\nprice : " + this.price +
"\nend : " + this.end)
}
}
}
new Vue({
el: '#contents',
components: {
'device-template': Devices
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.