JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="counter-app">
  <div class="wrapper count--wrapper">
    <span class="count--number">{{count}}</span>
  </div>
  <div class="wrapper button--wrapper">
    <button 
      class="btn btn--plus"
      v-on:click="increaseCount()"
      v-bind:disabled="isMoreThanEqualFive">+</button>
    <button 
      class="btn btn--minus"
      v-on:click="decreaseCount()"
      v-bind:disabled="isLessThanEqualZero">-</button>    
  </div>
  <div class="wrapper hint--wrapper">
    <div v-if="isMoreThanEqualFive">최대 값은 5 입니다.</div>
    <div v-else-if="isLessThanEqualZero">최소 값은 0 입니다.</div>
    <div v-else></div>
  </div>
</div>

SCSS

#counter-app {
  border: 1px solid black;
  text-align: center;
  box-sizing: border-box;
  width: 300px;
  margin: 0 auto;
}
.wrapper {
  margin-bottom: 10px;
}

.count--wrapper {
  padding: 20px;
  border-bottom: 1px solid #000;
 .count--number {
    font-size: 100px;
  }
}

.btn {
  width: 49%;
  font-size: 30px;
  background-color: #fff;
}

.btn:disabled {
  background-color: #A9A9A9;
  color: #808080;
}
.btn--plus {
  color: #008000;
}
.btn--minus {
  color: #FF0000;
}

JavaScript

const app = new Vue({
	el: '#counter-app',
  data: function () {
  	return {
    	count: 0
    }
	},
  computed: {
  	isMoreThanEqualFive: function () {
    	return this.count >= 5
    },
    isLessThanEqualZero: function () {
    	return this.count <= 0
    }
  },
  methods: {
    increaseCount: function () {
    	if (this.isMoreThanEqualFive) {
      	return
      }
      this.count++;
    },
    decreaseCount: function () {
    	if (this.isLessThanEqualZero) {
      	return
      }
      this.count--;
    }
  }
})