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

Данное руководство устарело. Актуальное руководство: Руководство по Vue 3

Для управленя вводом с элементов форм можно использовать модификаторы.

.lazy

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

<div id="app" class="col-md-4">
	<input type="text" v-model.lazy="name" class="form-control" />
	<span>Введено: {{name}}</span>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			name:''
        }
    });
</script>

.number

Модификатор .number позволяет автоматически конвертировать при вводе вводимое значение в число. Поскольку даже если мы установим у поля input атрибут type="number", то такое поле все равно будет возвращать строку:

<div id="app">
	<input v-model.number="age" type="number">
	<span>Введено: {{age}}</span>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			age: 0
        }
    });
</script>

.trim

Модификатор .trim автоматически обрезает начальные и концевые пробелы при вводе строки:

<div id="app">
	<input v-model.trim="message">
	<span>Введено: {{message}}</span>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			message: ''
        }
    });
</script>

Объединение модификаторов

Также можно объединять модификаторы:

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