Weight Conversion Calculator Using VueJS

In this VueJS tutorial we will create a weight conversion calculator. Infact we will create two conversion calculator. The first calculator will convert pound to kilogram and the second calculator will do vise versa.

HTML - For Pound To Kilogram Conversion Calculator

<h3>Convert - Pound To Kilogram</h3>
<label for="">Enter Pound Weight</label>
<input type="number" placeholder="weight in pound" v-model.number="weightpound">
<h4>Weight in Kilogram: {{ kgweight }}</h4>

HTML - For Kilogram To Pound Conversion Calculator

<h3>Convert - Kilogram To Pound</h3>
<label for="">Enter Kilogram Weight</label>
<input type="number" placeholder="weight in kilogram" v-model.number="weightkg">
<h4>Weight in Pound: {{ poundweight }}</h4>

VueJS

var vueApp = new Vue({
  el: "#vue-element",
  data: {
    weightpound: "",
    weightkg: ""
  },
  computed: {
    kgweight: function() {
      return this.weightpound * 0.453592;
    },
    poundweight: function() {
      return this.weightkg * 2.2046;
    }
  }
})

I have used v-model to get the calculated value in real time.

Demo

Demo – Weight Conversion Calculator Using VueJS