Weight Conversion Calculator Using VueJS

veujs-weight-conversion-calculator

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

1
2
3
4
<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

1
2
3
4
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *