Beregnede egenskaper i Vue

Man kan definere egenskaper som vil bli reaktivt beregnet basert på andre egenskaper. Slike egenskaper kalles beregnede. De plasseres i innstillingen computed.

La oss se på et eksempel. Anta at egenskapene lagrer brukerens fornavn og etternavn:

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

La oss lage en egenskap full som vil inneholde fullt navn med etternavn:

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

La oss vise innholdet av våre egenskaper i presentasjonen:

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

Beregnede egenskaper endres reaktivt. Dette betyr at hvis vi endrer fornavn eller etternavn, vil vår egenskap full automatisk endres reaktivt og vi vil umiddelbart se endringene på skjermen.