Привязки ввода формы

Vue предоставляет нам директиву v-модели, которая используется для создания двусторонних привязок данных на входах формы, текстовой области, а также для выбора полей. Эта директива автоматически выбирает правильный способ обновления элемента в зависимости от типа ввода. Хотя это немного волшебно, v-модель является синтаксическим сахаром для обновления данных о событиях пользовательского ввода, но она также обеспечивает особую осторожность для некоторых крайних случаев.

v-модель использует разные свойства внутри и генерирует разные события для разных типов входных элементов:

• text и textarea используют свойство value и событие ввода;
• флажки и радиокнопки используют свойство selected и событие change;
• В полях выбора значение используется в качестве реквизита, а изменение - в качестве события.

Текст

<input v-model="information" placeholder="edit me">
<p>Message is: {{ information }}</p>

Многострочный текст

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

флажок

Одиночный флажок, логическое значение:

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

Несколько флажков, которые привязаны к одному массиву:

<div id='example-3'>
  <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>Checked names: {{ 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: {{ picked }}</span>

Выбрать

<select v-model="selected">
  <option disabled value="">Select One </option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

Множественный выбор (привязанный к массиву):

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ 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: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Привязки значений

Значения привязки V-модели обычно являются статической строкой для радио, выберите опции и флажок.

<!-- `picked` is a string "b" when checked -->
<input type="radio" v-model="picked" value="b">
<!-- `toggle` is either false or true-->
<input type="checkbox" v-model="toggle">
<!-- `selected` is a string "xyz" when the first option is selected -->
<select v-model="selected">
  <option value="xyz">XYZ</option>
</select>

Для достижения динамического связывания мы должны использовать директиву v-bind.

флажок

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

Атрибуты false-value и true-value не влияют на атрибут значения input. Это связано с тем, что браузеры не включают непроверенные поля в отправку формы. Чтобы гарантировать, что одно из двух значений представлено в форме (например, «да» или «нет»), используйте вместо этого радиовходы.

Выберите параметры

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 456 }">456</option>
</select>

Модификаторы

.lazy

v-модель синхронизирует ввод с данными после каждого события ввода по умолчанию. Вы всегда можете добавить модификатор lazy для синхронизации после изменений:

<input v-model.lazy="msg" >

.число

Если вы хотите, чтобы пользовательский ввод автоматически вводился как число, вы можете добавить модификатор числа к управляемым входам v-модели:

.отделка

Для автоматического удаления пробелов из пользовательского ввода вы можете использовать модификатор .trim в управляемой-управляемой вашей v-модели.

V-модель с компонентами

Мы можем использовать компоненты для создания входных данных многократного использования, и мы можем в равной степени заставить их работать с v-моделью, поскольку она поддерживается.