Vue.js Формы

В этом разделе мы рассмотрим применение форм Vue.js.

Вы можете использовать директиву v-model для создания двусторонней привязки данных на элементах управления формы.

v-model автоматически выбирает правильный способ обновления элемента в зависимости от типа элемента управления.

Поля ввода

Пример демонстрирует двустороннюю привязку данных с помощью v-model на элементах input и textarea:

<div id="app"> <p>элемент input:</p> <input v-model="message" placeholder="Измените меня..."> <p>Сообщение: {{ message }}</p> <p>элемент textarea:</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="Многострочный ввод текста..."></textarea> </div> <script>new Vue({ el: '#app', data: { message: 'Example', message2: 'Example\r\nhttp://www.example.com' } })</script>

Попробуйте »

Флажок

Флажок может быть логическим значением, а несколько флажков привязываются к одному и тому же массиву:

Флажок

В следующем примере демонстрируется двусторонняя привязка данных флажков:

<div id="app"> <p>Одиночный флажок:</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>Несколько флажков:</p> <input type="checkbox" id="example" value="Пример" v-model="checkedNames"> <label for="example">Пример</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>Выбранные значения: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>

Попробуйте »

Результат установки флажков в примере показан ниже:

Радиокнопка

В следующем примере показана двусторонняя привязка данных радиокнопок:

Радиокнопка

<div id="app"> <input type="radio" id="example" value="Example" v-model="picked"> <label for="example">Example</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>Выбранное значение: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'Example' } }) </script>

Попробуйте »

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

Список выбора

Следующий пример демонстрирует двустороннюю привязку данных выпадающего списка:

select

<div id="app"> <select v-model="selected" name="fruit"> <option value="">Выберите сайт</option> <option value="www.example.com">Example</option> <option value="www.google.com">Google</option> </select> <div id="output">Выбранный веб-сайт: {{selected}}</div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>

Попробуйте »

Пример выпадающего списка, результат показан ниже:

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

.lazy

По умолчанию v-model синхронизирует значение поля ввода с data по событию input, но можно добавить модификатор lazy, чтобы вместо этого синхронизировать по событию change:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.число

Если вы хотите автоматически преобразовать введённое пользователем значение в тип Number (если исходное значение преобразуется в NaN, возвращается исходное значение), вы можете добавить модификатор number к v-model для обработки входного значения:

<input v-model.number="age" type="number">

Обычно это полезно, потому что при type="number" значение, введённое в HTML, всегда возвращается как строковый тип.

.trim

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

<input v-model.trim="msg">
Другие расширения