Работа с формами

Элементы input и textarea

Последнее обновление: 31.08.2017

Для работы с элементами ввода, в частности, с элементами input, select, textarea, применяется директива v-model, которая устанавливает двустороннюю привязку между элементом ввода и свойством объекта Vue. При этом v-model игнорирует значения атрибутов value, checked и selected, которые имеются у элементов ввода.

Например, используем ряд базовых элементов input:

<!DOCTYPE html>
<html>
<head>
<title>Формы во Vue.js</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="col-md-4">
	<label>Логин</label>
	<input type="text" v-model="login" placeholder="Введите логин" class="form-control" /><br>
	<label>Пароль</label>
	<input type="password" v-model="password" placeholder="Введите пароль" class="form-control" /><br>
	<label>Возраст</label>
	<input type="number" v-model="age" min="18" placeholder="Введите возраст" class="form-control" /><br>
	<label>Дата регистрации</label><br>
	<input type="date" v-model="date" placeholder="Введите дату" class="form-control" />
	<br>
	<div>
		<h3>Введенная информация</h3>
		<p>Логин: {{login}}</p>
		<p>Пароль: {{password}}</p>
		<p>Возраст: {{age}}</p>
		<p>Дата регистрации: {{date}}</p>
	</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			login:'',
			password:'',
			date: '',
			age: 22
        }
    });
</script>
</body>
</html>
элементы формы в Vue.js

textarea

Элемент textarea позволяет вводить многострочный текст и также связывается со свойством во Vue через директиву v-model:

<div id="app" class="col-md-4">
	<label>Введите комментарий</label>
	<textarea v-model="comment" class="form-control"></textarea>
	<br>
	<div>
		<h3>Комментарий</h3>
		<p style="white-space: pre-line">{{comment}}</p>
	</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			comment:'Комментарий....'
        }
    });
</script>
textarea во Vue.js

В то же время есть некоторые особенности по работе с textarea. Прежде всего, если используется директива v-model, то внутри textarea мы не можем поместить текст с помощью интерполяции:

<textarea v-model="comment" class="form-control">{{comment}}</textarea>

И кроме того, при вводе текста в textarea с помощью клавиши Enter мы можем переносить строки. Чтобы переносы строк сохранялись при выводе текста на страницу, необходимо применять соответствующие стили css:

<p style="white-space: pre-line">{{comment}}</p>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850