Изчисляеми свойства във 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 автоматично ще се промени реактивно и веднага ще видим промените на екрана.