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

Элементы input и textarea

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

Ранее в теме про Двустороннюю привязку рассматривалась директива v-model, которая позволяет связать помощью двусторонней привязки html-элементы input, select, textarea и свойства из приложения Vue. Рассмотрим более подробно, как мы можем применять v-model и двустороннюю привязку для работы с формами. Например, используем ряд базовых элементов input:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</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"></script>
<script>
Vue.createApp({
  data() {
    return { 
		login:'',
		password:'',
		date: '',
		age: 22
	}
  }
}).mount('#app');
</script>
</body>
</html>

Директива v-model связывает атрибут value элемента input и свойство из приложения Vue и использует событие input у элемента для отслеживания изменения ввода. Если атрибут value у элемента input имеет некоторое значение, то оно игнорируется. В итоге при вводе в поле input свойство из приложения Vue подхватит введенное значение:

элементы формы и двусторонняя привязка с помощью v-model в Vue 3

textarea

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</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>
    <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"></script>
<script>
Vue.createApp({
  data() {
    return { 
		comment:'Комментарий....'
	}
  }
}).mount('#app');
</script>
</body>
</html>
v-model и textarea во Vue 3

В то же время есть некоторые особенности по работе с 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