мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Работа с вычисляемыми свойствами в фреймворке Vue

Если одно и то же свойство выводится в нескольких местах и каждый раз при выводе мы применяем фильтр, это может быть не очень оптимальным с точки зрения производительности.

Почему? Потому что один и тот же фильтр выполнится несколько раз для одной и той же строки. Получится, что выполняются лишние операции и нам, конечно же, хотелось бы этого избежать.

Избежать лишних операций можно с помощью так называемых вычисляемых свойств.

Эти свойства работают также, как и обычные отличаются тем, что они не присутствуют в data изначально а вычисляются в процессе работы скрипта.

Давайте посмотрим на практическом примере.

Пусть у нас есть свойство message, в котором хранится некоторая строка-сообщение. Давайте сделаем вычисляемое свойство reversedMessage, в котором будет хранится это же сообщение, но в перевернутом виде.

Для начала давайте сделаем функцию, которая будет выполнять переворот свойства message:

reversedMessage: function() { return this.message.split('').reverse().join(''); }

Разместим теперь нашу функцию в настройке computed, предназначенной для создания вычисляемых свойств:

let app = new Vue({ el: '#app', data: { // Наше сообщение: message: 'hello', }, computed: { // Перевернутое сообщение: reversedMessage: function() { return this.message.split('').reverse().join(''); } } });

То есть: обычные свойства хранятся в настройке data и представляют собой некоторые данные (числа, строки, массивы и тп), а вычисляемые свойства хранятся в настройке computed и представляют собой функции.

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

<div id="app"> <p>Изначальное сообщение: {{ message }}</p> <p>Сообщение задом наперед: {{ reversedMessage }}</p> </div>

Как вы видите, в шаблоне нет разницы между обычными свойствами и вычисляемыми. В этом особое удобство использования вычисляемых свойств.

Итак, давайте соберем весь код вместе и запустим:

let app = new Vue({ el: '#app', data: { message: 'hello', }, computed: { reversedMessage: function() { return this.message.split('').reverse().join(''); } } }); <div id="app"> <p>Изначальное сообщение: {{ message }}</p> <p>Сообщение задом наперед: {{ reversedMessage }}</p> </div>

После запуска кода в первый абзац выведется наше сообщение, а во второй - оно же, но в перевернутом виде.

Пусть в data есть три свойства: name (имя), surname (фамилия) и patronymic (отчество). Сделайте вычисляемое свойство fullName, которое будет содержать фамилию, имя и отчество, записанные через пробел.

Реактивность

Давайте сделаем так, чтобы наше сообщение message не было изначально задано в data, а было привязано к инпуту и по мере ввода выводилось в абзац под этим инпутом:

let app = new Vue({ el: '#app', data: { message: '', }, }); <div id="app"> <input v-model="message"> <p>Вводимое сообщение: {{ message }}</p> </div>

Добавим теперь и вычисляемое свойство reversedMessage и также выведем его в абзац:

let app = new Vue({ el: '#app', data: { message: '', }, computed: { reversedMessage: function() { return this.message.split('').reverse().join(''); } } }); <div id="app"> <input v-model="message"> <p>Вводимое сообщение: {{ message }}</p> <p>Сообщение задом наперед: {{ reversedMessage }}</p> </div>

В результате, если запустить приведенный код и начать вводить данные в инпут, то в первом абзаце сразу же будут появляться введенная строка, а во втором - эта же строка в перевернутом виде.

Дан инпут, в который вводится число. Сделайте так, чтобы по мере ввода числа в инпут, под этим инпутом в первом абзаце выводилось вводимое число, а во втором - квадрат этого числа.

Дан инпут, в который вводится число. Сделайте так, чтобы в абзаце под инпутом вводимое число выводилось так, чтобы тройки цифр отделялись пробелами. Например, число 12345678 должно предстать в виде 12 345 678.