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 свойствимиз автоматик реактив ўзгариб, биз дарҳол ўзгаришларни экранда кўрамиз.