Simple Math Vue

Exercise 5 from 57 Exercises

by NodToNothing

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<!-valiidity.valid -checks against the min during typing -->
<!--https://www.w3schools.com/js/js_validation_api.asp-->
Number 1: <input min="0" ref="input" type="number" value="Scooter" v-model="num1" oninput="validity.valid||(value='');"/><BR/>
Number 2: <input min="0" ref="input" type="number" value="Scooter" v-model="num2" oninput="validity.valid||(value='');"/><BR/>
<br>Sum: {{sum}}
<br>Difference: {{sub}}
<br>Division: {{div}}
<br>Multiply: {{multi}}

</div>

JavaScript

var app = new Vue({
  el: '#app',
  components: {
  },
  data: {
   num1: 800,
   num2: 40
  },
  computed:{
   sum: function(){
     return this.num1 + this.num2;
    },
    sub: function(){
     return this.num1 - this.num2;
    },
    multi: function(){
     return this.num1 * this.num2;
    },
    div: function(){
     return this.num1 / this.num2;
    }
  }
})