Vuejs Expressions – Numbers Strings Objects Array eval using Vuejs

Vuejs Expressions – Numbers Strings Objects Array eval using Vuejs

Computed Properties using Vuejs

Computed properties are useful in Maths Expression where the value of one variable depends on one varible or more other variables. Take this simple example as a use case for all the Number computed properties:

Introduction to Computed Properties Example in Vue.js

index.html

<div id="vue-instance">
   result: {{ squarenumber }}
</div>

index.js

var vm = new Vue({
  el: '#vue-instance',
  data: {
    ldata: 1
  },
  computed: {
    squarenumber: function() {
      return this.ldata * 2;
    }
  }
});

In this Example will be explain to we provide the user with an simple input textbox asking them for a any number and you automatically double data bindning return double that each number.

Vuejs directive expression value Example

Computed properties can be simple used to do quick calculations and easy cal of properties that are some each displayed in the view side. These calculations will be data-bindning to cached and will only show each data update when needed.Vuejs Expressions – Numbers Strings Objects Array eval using Vuejs

index.html

<div id="liveApp">
  <button>Add Item</button>

  <div class="Items">
    <div>
    </div>
  </div>
</div>

index.js

console.clear()

Vue.component('Item', {
  template: `
    <div>
      
        Item One
        Item Two
      
      
      
      <button>Delete</button>
    </div>
  `,
  data(){
    return {
      Item: null,
      Computer: null,
      QtyItem: null
    }
  },
  watch:{
    Computer(realValue){
      this.QtyItem = realValue * 25
    },
    QtyItem(realValue){
      this.Computer = realValue / 25
    }
  }
})

new Vue({
  el: '#liveApp',
  data: {
    Items: []
  },
  methods: {
    addItem: function() {
      this.Items.push(this.index);
    },
  }
})

Example

Example