Вылічальныя ўласцівасці ў Vue

Можна задаваць уласцівасці, якія будуць рэактыўна вылічацца на аснове іншых уласцівасцей. Такія ўласцівасці называюцца вылічальнымі. Яны размяшчаюцца ў наладзе computed.

Давайце паглядзім на прыкладзе. Хай ва ўласцівасцях захоўваецца імя і прозвішча карыстальніка:

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

Давайце зробім уласцівасць full, якое будзе ўтрымліваць поўнае імя з прозвішчам:

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

Вывядзем у прадстаўленні змест нашых уласцівасцей:

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

Вылічальныя ўласцівасці змяняюцца рэактыўна. Гэта значыць, што калі мы зменім імя ці прозвішча, то і наша ўласцівасць full аўтаматычна рэактыўна зменіцца і мы адразу ўбачым змены на экране.