Двусторонняя привязка и директива v-model

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

Ранее были рассмотрены примеры использования односторонней привязки с помощью интерполяции. Но кроме того, Vue 3 двустороннюю привязку. Для создания подобной привязки используется директива v-model. Однако стоит отметить, что эта директива может применяться только к html-элементам <input>, <select>, <textarea> и к компонентам Vue.

Рассмотрим на простом примере:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>Введите имя:
     <input type="text" v-model="userName" placeholder="Введите имя" />
	</p>
	<p>Ваше имя: {{ userName }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {userName: 'Tom'}
  }
}).mount('#app');
</script>
</body>
</html>

Здесь на странице определено текстовое поле input, которое с помощью директивы v-model привязано к свойству userName из объекта Vue. В этом случае нам не надо добавлять к текстовому полю обработчик события ввода, и в этом обработчике менять вручную значение свойства userName - оно изменится автоматически при изменении текста в текстовом поле. То есть сработает двусторонняя привязка.

Директива v-model в Vue 3

То есть с одной стороны, текстовое поле получает значение из объекта Vue, а с другой стороны, объект Vue исходя из введенного в текстовое поле значения изменяет свое свойство.

Рассмотрим другой пример - определим программу вычисления площади прямоугольника:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>Ширина: <input type="number" v-model="width" placeholder="Введите ширину" /></p>
    <p>Высота: <input type="number" v-model="height" placeholder="Введите высоту" /></p>
	<p>Площаль прямоугольника: {{ width * height }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {width: 20, height: 10}
  }
}).mount('#app');
</script>
</body>
</html>

В данном случае одно поле ввода привязано к свойству width, а другое - к свойству height. При введении значения в одно из этих полей автоматически будет перевычисляться площадь прямоугольника, которая выводится ниже.

Двусторонняя привязка и v-model в Vue 3

Стоит отметить, что директива v-model игнорирует значения атрибутов value, checked и selected полей ввода, а для установки начального значения следует использовать свойства объекта из кода javascript.

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

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