Упражнение. Добавление вычисляемых свойств

Завершено

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

Добавление вычисляемого свойства

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

1. В Visual Studio Code откройте файл index.js.

2. В строке после TODO: Add computed values комментария добавьте следующий код JavaScript для создания вычисляемого значения.

   // TODO: Add computed values
   computed: {
       bookingCabinDisplay() {
           const cabin = this.product.cabins[this.booking.cabinIndex];
           return `${cabin.name}: $ ${cabin.price.toLocaleString('en-US')}`
       }
   },
   

Вы можете использовать this для доступа к product.cabins. Вы используете booking.cabinIndex для поиска класса, выбранного пользователем. Затем вы создадите отображаемую строку с помощью шаблона ECMAScript.

Добавление отображения на страницу

Теперь добавьте отображение на страницу:

1. В Visual Studio Code откройте файл index.html.

2. В строке после TODO: Add success display комментария добавьте следующий HTML-код для отображения резервирования.

   <!-- TODO: Add success display -->
   <div v-show="booking.completed">
       <h2 class="row">
           You are on your way!
       </h2>
       <div class="row">
           <div>Booking details:</div>
           <div>{{ bookingCabinDisplay }} </div>
           <div>Notes: {{ booking.notes }}</div>
       </div>
   </div>
   

Обратите внимание, что вы используете v-show для вывода содержимого, если параметр booking.completed имеет значение true. Ранее вы настроили это поведение для кнопки. Также обратите внимание, что можно прочитать bookingCabinDisplay, как и любое другое строковое значение в Vue, чтобы отобразить его для пользователя.

Тестирование страницы

Теперь проверьте страницу в действии.

1. Сохраните все файлы, выбрав Файл>Сохранить все.

2. Откройте палитру команд, нажав клавиши Ctrl+Shift+P. На Mac вместо этого нажмите CMD+SHIFT+P.

3. Убедитесь, что Live Server запущен — введите Live Server и выберите Live Server: открыть с Live Server.

4. Откройте веб-браузер и перейдите по адресу http://localhost:5500. Откроется ваша страница.

5. Заполните форму.

   

6. Нажмите кнопку и обратите внимание на отображение.

   

Вы добавили в приложение Vue вычисляемое свойство.