
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
Category