Skip to main content

Weight Conversion Calculator Using VueJS

Submitted by admin on Mon, 06/06/2022 - 22:16
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


<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

Category

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.