<div id="app">
  <div class="grid-container">
    <div class="output">{{displayValue}}</div>
    <div class="buttons" @click="addExpresion('1');">1</div>
    <div class="buttons" @click="addExpresion('2');">2</div>
    <div class="buttons" @click="addExpresion('3');">3</div>
    <div class="buttons" @click="addExpresion('+');">+</div>
    <div class="buttons" @click="addExpresion('4');">4</div>
    <div class="buttons" @click="addExpresion('5');">5</div>
    <div class="buttons" @click="addExpresion('6');">6</div>
    <div class="buttons" @click="addExpresion('-');">-</div>
    <div class="buttons" @click="addExpresion('7');">7</div>
    <div class="buttons" @click="addExpresion('8');">8</div>
    <div class="buttons" @click="addExpresion('9');">9</div>
    <div class="buttons" @click="addExpresion('*');">X</div>
    <div class="buttons" @click="clear();">C</div>
    <div class="buttons" @click="addExpresion('0');">0</div>
    <div class="buttons" @click="addExpresion('=');">=</div>
    <div class="buttons" @click="addExpresion('/');">/</div>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 3px;
  background-color: #2196F3;
  padding: 5px;
  width: 400px;
}

.output {
  background-color: rgba(255, 255, 255, 0.9);
  grid-column: 1 / 5;
  text-align: right;
  padding: 20px 10px;
  font-size: 40px;
}

.buttons {
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

new Vue({
  el: "#app",
  data() {
    return {
      value: ''
    };
  },
  methods: {
    addExpresion(e) {
      // Here to avoid them hitting '=' twice :)
      if(this.value.slice(-1) != '=')
        this.value += e;
    },
    clear(){
      this.value = '';
    }
  },
  computed: {
    displayValue: function () {
      if(this.value=='')
        return 0;
      if(this.value.slice(-1) == '=')
        return eval(this.value.slice(0, -1));
      else{
        return this.value;
      }
    }
  }
});