Berekende eigenschappen in Vue

Je kunt eigenschappen instellen die reactief worden berekend op basis van andere eigenschappen. Dergelijke eigenschappen worden berekende eigenschappen genoemd. Ze bevinden zich in de optie computed.

Laten we een voorbeeld bekijken. Stel dat de voornaam en achternaam van de gebruiker in de eigenschappen zijn opgeslagen:

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}

Laten we een eigenschap full maken die de volledige naam met achternaam bevat:

javascriptcomputed: {
  full: function() {
    return this.name + ' ' + this.surn;
  }
}

Laten we de inhoud van onze eigenschappen in de template weergeven:

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

Berekende eigenschappen veranderen reactief. Dit betekent dat als we de voornaam of achternaam wijzigen, onze eigenschap full automatisch reactief zal veranderen en we de wijzigingen direct op het scherm zullen zien.