MyTetra Share
Делитесь знаниями!
Стандартные элементы HTML-форм в Vue
24.02.2018
13:03
Автор: br0ke
Текстовые метки: javascript, js, vue, vuejs, vue.js, forms, form, input, v-model
Раздел: Информационные технологии - JavaScript - Vue

Обычно для обработки данных форм используются стандартные элементы форм HTML (input text, checkbox, radio, button, etc) с директивой v-model, которая устанавливает двухстороннее связывание между элементом формы и некоторой переменной. Таким образом в переменной всегда хранится такое же значение, как и в поле ввода, например.


Поля ввода (input text, password, number):

=====================


<input v-model="message" placeholder="отредактируй меня">
<p>Введённое сообщение: {{ message }}</p>


В данном случае содержимое поля ввода будет отображено в параграфе под ним через интерполяцию переменной message.


Многострочные поля ввода (textarea):

===================================


<span>Введённое многострочное сообщение:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="введите несколько строчек"></textarea>


Нужно иметь ввиду, что хоть тег textarea и является парным (имеет открывающий и закрывающий тег), всё равно нужно использовать директиву v-model. Нельзя просто взять и интерполировать переменную внутри тега, это работать не будет:

<textarea>{{ message }}</textarea>


Чекбоксы с привязкой к булевому типу:

====================================

В данном примере чекбокс привязан к булевой переменной, которая принимает значение true, если чекбокс отмечен, и значение false -- в противном случае.

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>


Чекбоксы с привязкой к массиву:

==============================

В данном примере несколько чекбоксов привязаны через v-model к одной и той же переменной, которая является массивом. В данном случае Vue будет добавлять в массив значение, если соответствующий чекбокс отмечен, и удалять -- если соответствующий чекбокс не отмечен.


<div id="example-3" class="demo">
<input type="checkbox" id="jack" value="Джек" v-model="checkedNames">
<label for="jack">Джек</label>
<input type="checkbox" id="john" value="Джон" v-model="checkedNames">
<label for="john">Джон</label>
<input type="checkbox" id="mike" value="Майк" v-model="checkedNames">
<label for="mike">Майк</label>
<br>
<span>Отмеченные имена: {{ checkedNames }}</span>
</div>


new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})


Переключатели (radio buttons):

=============================

Vue понимает, что radio относятся к одной группе, если они привязаны через v-model к одной и той же переменной.


<input type="radio" id="one" value="Один" v-model="picked">
<label for="one">Один</label>
<br>
<input type="radio" id="two" value="Два" v-model="picked">
<label for="two">Два</label>
<br>
<span>Выбрано: {{ picked }}</span>


Выпадающие списки:

==================

<select v-model="selected">
<option disabled value="">Выберите один из вариантов</option>
<option>А</option>
<option>Б</option>
<option>В</option>
</select>
<span>Выбрано: {{ selected }}</span>


new Vue({
el: '...',
data: {
selected: ''
}
})


Выпадающие списки с множественным выбором (привязка к массиву):

==============================================================

<select v-model="selected" multiple>
<option>А</option>
<option>Б</option>
<option>В</option>
</select>
<br>
<span>Выбрано: {{ selected }}</span>


Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования