Cacher is the code snippet organizer for pro developers

<div class="row center-xs" style="font-family: 'Orbitron', sans-serif;">
  <div class="col-xs-6">
    <div class="box main-container" id="app">
      <div class="row center-xs">
        <h1 class="heading">CALCULATOR</h1>
        <div class="col-xs-10">
          <div class="box display">
              <p id="display">{{display}}</p>
          </div>
          <div class="box">
            <div class="row">
              <a class="col-xs-12 clear-keypad" @click="clear()">AC</a>
            </div>
            <div class="row">
              <div class="col-xs-3 keypad">
                <a @click="addTo(1)"><h3>1</h3></a>
              </div>
              <div class="col-xs-3 keypad">
                <a @click="addTo(2)"><h3>2</h3></a>
              </div>
              <div class="col-xs-3 keypad">
                <a @click="addTo(3)"><h3>3</h3></a>
              </div>
              <div class="col-xs-3 keypad utility">
                <a @click="division()"><h3>÷</h3></a>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-3 keypad">
                <a @click="addTo(4)"><h3>4</h3></a>
              </div>
              <div class="col-xs-3 keypad">
                <a @click="addTo(5)"><h3>5</h3></a>
              </div>
              <div class="col-xs-3 keypad">
                <a @click="addTo(6)"><h3>6</h3></a>
              </div>
              <div class="col-xs-3 keypad utility">
                <a @click="multiplication()"><h3>x</h3></a>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-3 keypad">
                <a @click="addTo(7)"><h3>7</h3></a>
              </div>
              <div class="col-xs-3 keypad">
                <a @click="addTo(8)"><h3>8</h3></a>
              </div>
              <div class="col-xs-3 keypad">
                <a @click="addTo(9)"><h3>9</h3></a>
              </div>
              <div class="col-xs-3 keypad utility">
                <a @click="subtraction()"><h3>-</h3></a>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-3 keypad">
                <a @click="addTo(6)"><h3>0</h3></a>
              </div>
              <div class="col-xs-3 keypad">
                <h3>.</h3>
              </div>
              <div class="col-xs-3 keypad">
                <a @click="calculate()"><h3>=</h3></a>
              </div>
              <div class="col-xs-3 keypad utility">
                <a @click="addition()"><h3>+</h3></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

'use strict'

var app = new Vue({
  el: '#app',
  data: {
    display: 0,
    hidden: 0,
    prevDisplay: 0,
    state: '',
  },
  methods: {
    clear: function() {
      this.display = 0;
    },
    addTo: function(value) {
      if(this.state == 'equals') {
        this.display = value;
      }
      else if(this.display == 0){
        this.display = value;        
      } 
      else if (typeof this.display === 'string'){
        this.display = value;
      }
      else if (this.display !== 0) {
        this.display = parseInt(this.display + '' + value);
      }
    },
    addition: function() {
      this.prevDisplay = this.display;
      this.display =  '' + this.display;
      this.state = 'add';
    },
    subtraction: function() {
      this.prevDisplay = this.display;
      this.display =  '' + this.display;
      this.state = 'sub';
    },
    multiplication: function() {
      this.prevDisplay = this.display;
      this.display =  '' + this.display;
      this.state = 'multiply';
    },
    division: function() {
      this.prevDisplay = this.display;
      this.display =  '' + this.display;
      this.state = 'division';
    },
    calculate: function() {
      if(this.state == 'add' && this.display !== 0) {
        this.display = this.display + this.prevDisplay;
      }
      else if(this.state == 'sub' && this.display !== 0) {
        this.display = this.prevDisplay - this.display;
      }
      else if(this.state == 'multiply' && this.display !== 0) {
        this.display = this.prevDisplay * this.display;
      }
      else if(this.state == 'division' && this.display !== 0) {
        this.display = this.prevDisplay / this.display;
      }
      this.prevDisplay = 0;
      this.state = 'equals';
    }
  },
  computed: {

  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

.main-container {
  margin-top: 50px;
}

.heading {
  margin: 15px;
}

.display {
  background-color: #F0F2EF;
  text-align: right;
}

.keypad {
  background-color: #CEEAF7;
  height: 50px;
  padding: 15px;
  border: 1px solid #828A95;
}

.keypad.utility {
  background-color: #A7A7A9;
}

.clear-keypad {
  background-color: #6DFFC7;
  height: 50px;
  padding: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" />