Продвинутая работа с формами в фреймворке Vue

Сейчас мы с вами научимся работе с текстареа, чекбоксами, радиокнопочками и селектами в фреймворке Vue.

Textarea

Работа с textarea происходит абсолютно также, как и с инпутами - через директиву v-model:

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

Вот такая вставка переменной: <textarea>{{text}}</textarea> - не будет работать. Используйте вместо нее директиву v-model.

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

Дан текстареа и кнопка. В текстареа вводится текст. По нажатию на кнопку получите массив введенных в текстареа слов и выведите элементы этого массива в виде списка ul.

Чекбоксы

Давайте теперь посмотрим, как происходит работа с чекбоксами.

Пусть у нас есть чекбокс, к которому через v-model привязано свойство checked:

<div id="app"> <input type="checkbox" v-model="checked"> </div>

Если чекбокс отмечен - свойство checked будет иметь значение true, а если не отмечен - то false.

Чтобы убедится в этом, можно вывести значение свойства checked на экран, вот так:

<div id="app"> <input type="checkbox" v-model="checked"> <p>Состояние: {{ checked }}</p> </div>

Не забудьте о том, что при использовании любого свойства, в нашем случае checked оно должно быть объявлено в data.

В нашем случае checked может иметь значение true или false и будет задавать начальное состояние чекбокса: если в checked лежит true - то чекбокс будет по умолчанию отмечен, а если false - то не отмечен.

Итак, реализуем описанное и запустим:

let app = new Vue({ el: '#app', data: { checked: true, }, }); <div id="app"> <input type="checkbox" v-model="checked"> <p>Состояние: {{ checked }}</p> </div>

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

Дан чекбокс. Выведите его состояние (true или false) в абзаце под ним.

Дан чекбокс. Дан абзац. С помощью директивы v-if сделайте следующее: если чекбокс отмечен - абзац должен быть показан, а если не отмечен - то скрыт.

Чекбоксы и тернарный оператор

Пусть мы хотим в нашем абзаце выводить не true/false, а что-то более осмысленное в зависимости от состояния чекбокса.

В этом нам поможет тернарный оператор. Давайте с его помощью будем выводить 'отмечен', если в checked лежит true, и 'не отмечен', если там false:

<div id="app"> <input type="checkbox" v-model="checked"> <p>Состояние: {{ checked ? 'отмечен' : 'не отмечен' }}</p> </div> let app = new Vue({ el: '#app', data: { checked: true, }, });

Дан чекбокс. Выведите его состояние ('отмечен' или 'не отмечен') в абзаце под ним.

Чекбоксы и массив

Пусть у нас есть группа чекбоксов. Можно сделать так, чтобы значение атрибута value всех отмеченных чекбоксов складывалось в массив.

Для этого нужно к v-model этих чекбоксов привязать массив. Давайте сделаем это:

let app = new Vue({ el: '#app', data: { lang: [], // значение по умолчанию - массив }, }); <div id="app"> <input type="checkbox" v-model="lang" value="html"> <input type="checkbox" v-model="lang" value="css"> <input type="checkbox" v-model="lang" value="js"> <p>Содержимое массива: {{ lang }}</p> </div>

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

Даны чекбоксы. Сделайте так, чтобы value отмеченных чекбоксов выводились в какой-нибудь абзац.

Даны чекбоксы. С помощью директивы v-for сделайте так, чтобы их value выводились в виде списка ul.

Радиокнопочки

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

Пусть у нас есть набор радиокнопочек:

<input name="radio" type="radio"> <input name="radio" type="radio"> <input name="radio" type="radio">

Напишем каждой из них директиву v-model и привяжем к ней свойство type:

<input name="radio" type="radio" v-model="type"> <input name="radio" type="radio" v-model="type"> <input name="radio" type="radio" v-model="type">

Дадим также каждой из них свой value:

<input name="radio" type="radio" v-model="type" value="один"> <input name="radio" type="radio" v-model="type" value="два"> <input name="radio" type="radio" v-model="type" value="три">

Если запустить подобный код, то в свойстве type всегда будет лежать value отмеченной радиокнопочки.

Давайте запустим:

let app = new Vue({ el: '#app', data: { type: '', // не забываем задать привязанное свойство в data }, }); <div id="app"> <input name="radio" type="radio" v-model="type" value="один"> <input name="radio" type="radio" v-model="type" value="два"> <input name="radio" type="radio" v-model="type" value="три"> <p>Вы выбрали: {{ type }}</p> </div>

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

Спросите у пользователя с помощью радиокнопочек, какой язык для него родной (например, ru, en или de). Сделайте так, чтобы выбранный язык вывелся в абзаце под радиокнопочками.

Модифицируйте предыдущую задачу следующим образом: пусть у нас есть 3 абзаца с текстом на разном языке. В зависимости от выбора пользователя выведите фразу на выбранном им языке. Задачу решите с помощью директивы v-if или v-if-else.

Селекты

Работа с селектами осуществляется аналогично - на тег селект вешается атрибут v-model, к нему привязывается свойство объекта data. В это свойство будет попадать текст выбранного тега <option>.

Попробуйте сами - запустите следующий код и поиграйтесь с ним:

let app = new Vue({ el: '#app', data: { selected: 'один', // значение по умолчанию }, }); <div id="app"> <select v-model="selected"> <option>один</option> <option>два</option> <option>три</option> </select> <p>Вы выбрали: {{ selected }}</p> </div>

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

Селекты и циклы

Не обязательно делать теги <option> вручную, ведь чаще всего данные, которые будут показаны в селекте хранятся в массиве.

Давайте сделаем такой массив и сформируем теги <option> с помощью цикла v-for:

let app = new Vue({ el: '#app', data: { selected: 'один', // значение по умолчанию options: ['один', 'два', 'три'], // массив }, }); <div id="app"> <select v-model="selected"> <option v-for="option in options">{{ option }}</option> </select> <p>Вы выбрали: {{ selected }}</p> </div>

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