Vue Calculator

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue"></script>

<div class="container">
  <h1>Ingresa 2 números y escoge una operación.</h1>
  <form class="form-inline">
    <input v-model.number="a" class="form-control">
    <select v-model="operator" class="form-control">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
    <input v-model.number="b" class="form-control">
    <button type="submit" @click.prevent="calculate" class="btn btn-primary">
      Calcular
    </button>
  </form>
  <h2>Resultado: {{a}}  {{operator}}  {{b}} = {{c}}</h2>
  <pre>
    {{ $data }}
  </pre>
</div>

JavaScript

new Vue({
	el: '.container',
  data: {
  	a: 1,
    b: 2,
    c: null,
    operator: "+",
  },
  methods:{
  	calculate: function(){
    	switch (this.operator) {
      	case "+":
        	this.c = this.a + this.b
          break;
        case "-":
          this.c = this.a - this.b
          break;
        case "*":
        	this.c = this.a * this.b
          break;
        case "/":
        	this.c = this.a / this.b
          break;
       }
   }
 },
 });