<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="addExpresion('C');">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 {
      log: '',
    };
  },
  methods: {
    addExpresion(e) {
      if(e == 'C'){
        // If they clicked 'C' clear the log  
        this.clear();
      }else if(e == '='){
        // If they clicked '=', evaluate the log
        this.log = eval(this.log);
      }else{
        this.log = this.log + e;
      }
    },
    clear(){
      this.log = '';
    }
  },
  computed: {
    displayValue: function () {
      if(this.log == '')
        return 0;
      else
        return this.log;
    }
  }
});