<div id="app">
<div>
<compo-counter></compo-counter>
<compo-counter></compo-counter>
<compo-counter></compo-counter>
</div>
</div>html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #10375c;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
}
.plus {
font-size: 60px;
color: #ffff;
cursor: pointer;
user-select: none;
}
.minus {
font-size: 60px;
color: #ffff;
cursor: pointer;
user-select: none;
}
.num {
margin: 0 50px 0 50px;
color: lighten(red, 20%);
font-size: 60px;
user-select: none;
}
Vue.component("compoCounter", {
data() {
return {
num: 0
};
},
template: `
<div class="container">
<div class="plus" @click="plusNum">+</div>
<div class="num">{{ num }}</div>
<div class="minus" @click="minusNum">-</div>
</div>
`,
methods: {
plusNum() {
this.num = this.num + 1;
},
minusNum() {
if (this.num > 0) {
this.num = this.num - 1;
}
}
}
});
new Vue({
el: "#app"
});
External CSS
This Pen doesn't use any external CSS resources.