<div id="app">
<div class="container">
<countercomponent></countercomponent>
<countercomponent></countercomponent>
<countercomponent></countercomponent>
</div>
</div>
.container{
display: flex;
justify-content: space-between;
padding-right: 10px;
padding-left: 10px;
margin-top: 10px;
flex-wrap: wrap;
}Vue.component('countercomponent', {
data: function(){
return {
counter: 0
}
},
template: `
<div>
你已經點了 <button class="btn btn-outline-secondary btn-sm" @click="counter++" style="width:100px;">{{ counter }}</button>次
</div>
`
});
var app = new Vue({
el: '#app',
data: {
styleObject: {
color:'red'
}
}
});
External CSS
This Pen doesn't use any external CSS resources.