Типичное использование
Для двунаправленного связывания данных с элементами форм можно использовать директиву v-model. В зависимости от типа элемента автоматически выбираеся способ обновления элемента.
v-model игнорирует атрибуты value, checked или selected на любых элементах форм. Данные экземпляра будут рассматриваться как источник истины. Начальное значение нужно объявить на стороне JavaScript, внутри опции data компонента.
Текст
<input v-model="message" placeholder="отредактируй меня">
<p>Введённое сообщение: {{ message }}</p>
Многострочный текст
<span>Введённое многострочное сообщение:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="введите несколько строчек"></textarea>
Внутри тега textarea интерполяция (<textarea>{{text}}</textarea>) не будет работать. Для этого нужно использовать директиву v-model
Чекбоксы
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
Один чекбокс, привязанный к boolean значению:
<div id="example-3" class="demo">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Отмеченные имена: {{ checkedNames }}</span>
</div>
Множество чекбоксов, привязанных к одному массиву:
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
Радиокнопки
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Выбрано: {{ picked }}</span>
Выпадающие списки
Выбор одного варианта из списка:
<select v-model="selected">
<option disabled value="">Выберите один из вариантов</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Выбрано: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: ''
}
})
Если начальное значение выражения v-model не соответствует вариантам списка, элемент <select> отобразится в “невыбранном” состоянии.
В iOS пользователь не сможет выбрать первый элемент, так как iOS не сгенерирует событие change. Рекомендуется предоставлять отключённый вариант выбора с пустым значением value.
Выбор нескольких вариантов из списка (с привязкой к массиву):
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Выбрано: {{ selected }}</span>
Динамическое отображение опций с помощью v-for:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Выбрано: {{ selected }}</span>
Связывание значений
Для радиокнопок, чекбоксов и выпадающих списков выбора в качестве параметров v-model обычно указываются статические строки:
<!-- `picked` получает строковое значение "a" при клике -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` может иметь значение true или false -->
<input type="checkbox" v-model="toggle">
<!-- `selected` при выборе становится равным строке "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
Для связывания значений с динамическим свойством экземпляра Vue, используйте v-bind
Чекбокс
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// если чекбокс выбран:
vm.toggle === 'yes'
// если чекбокс сброшен:
vm.toggle === 'no'
Радиокнопки
<input type="radio" v-model="pick" v-bind:value="a">
// если отмечено:
vm.pick === vm.a
Списки выбора
<select v-model="selected">
<!-- инлайновый объект с данными -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// когда выбрано:
typeof vm.selected // => 'object'
vm.selected.number // => 123
Модификаторы
.lazy
По умолчанию, v-model синхронизирует ввод с данными на каждое событие input. Можно указать модификатор lazy, чтобы вместо этого использовать для синхронизации события change:
<!-- синхронизируется после "change", а не "input" -->
<input v-model.lazy="msg" >
.number
Чтобы автоматически привести введенные пользователем данные к числу, нужно добавить модификатор number:
<input v-model.number="age" type="number">
.trim
Чтобы автоматически обрезать пробелы в начале и в конце введённой строки, используйте модификатор trim:
<input v-model.trim="msg">
Использование v-model с компонентами
Компоненты Vue позволяют создавать пользовательские аналоги элементов ввода с настраиваемым поведением, которые тоже могут работать с директивой v-model.
0 комментариев