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.