Сейчас мы с вами научимся работе с текстареа, чекбоксами, радиокнопочками и селектами в фреймворке 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>
Дан массив. Дан селект. Выведите этот массив в виде селекта. Сделайте так, чтобы выбор пользователя отображался на экране.