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

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.