# Вычисляемые свойства в Vue

Можно задавать свойства, которые будут реактивно вычисляться на основе других свойств. Такие свойства называются вычисляемыми. Они располагаются в настройке `computed`.

Давайте посмотрим на примере. Пусть в свойствах хранится имя и фамилия юзера:

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

Давайте сделаем свойство `full`, которое будет содержать полное имя с фамилией:

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

Выведем в представлении содержимое наших свойств:

`<template> <p>{{ name }}</p> <p>{{ surn }}</p> <p>{{ full }}</p> </template>`

Вычисляемые свойства изменяются реактивно. Это значит, что если мы поменяем имя или фамилию, то и наше свойство `full` автоматически реактивно изменится и мы сразу увидим изменения на экране.

Пусть в свойстве `cost` хранится цена продукта, а в свойстве `amount` - количество этих продуктов. Сделайте вычисляемое свойство `price`, которое будет содержать полную стоимость продуктов (цена умножить на количество)

Сделайте кнопку, клик на которую будет изменять свойство `cost`. Проверьте, что вычисляемое свойство также будет изменяться при этом.

← →
↑