Vue JS — Примеры

Vue JS — Примеры

От автора: давайте посмотрим, какие могут быть во Vue JS примеры работы с различными свойствами.

Пример 1: Конвертер валют

Результат (Конвертация в USD)

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Результат: Конвертация в BHD

Пояснение − В вышеприведённом примере мы создали конвертер валют, который конвертирует одно значение валюты в избранное значение другой валюты. Мы создали два раскрывающихся списка валют. Когда мы вводим количество, которое нужно конвертировать, в текстовое поле, то же самое отображается ниже после конвертации. Мы используем свойство computed, чтобы выполнить необходимые расчёты для конвертации валют.

Пример 2: Сведения о клиенте

Результат

Результат после удаления

Объяснение − в вышеприведённом примере у нас есть три текстовых поля для ввода: Имя, Фамилия и Адрес. Также у нас есть кнопка Добавить, которая добавляет значения, введённые в текстовое поле в формате таблицы, и кнопка Удалить.

Формат таблицы создан при помощи компонентов. Нажимая на кнопку мы инициируем взаимодействие с родительским компонентом, используя событие emit для удаления элемента из массива. Введённые значения хранятся в массиве, и они совместно используются дочерним компонентом благодаря свойству prop.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree