Двусторонняя привязка данных к инпутам в Vue
Сейчас мы научимся работе с инпутами в фреймворке Vue. С их помощью мы будем реактивно добавлять данные на страницу. Давайте приступим. Пусть у нас есть инпут:
<template>
<input>
</template>
Пусть также у нас есть
свойство message:
data() {
return {
message: 'hello',
}
}
Мы можем связать это свойство и инпут таким
образом, чтобы изменение любого из них
приводило к изменению другого.
Это делается с помощью директивы v-model,
в которой указывается свойство, привязанное
к инпуту.
Давайте привяжем к нашему инпуту свойство
message:
<template>
<input v-model="message">
</template>
После запуска кода в инпуте будет стоять текст
свойства message. А если поредактировать
данные в инпуте - свойство также изменится
соответствующим образом. Чтобы увидеть это,
давайте выведем введенное в инпут содержимое
где-нибудь в абзаце:
<template>
<input v-model="message">
<p>{{ message }}</p>
</template>
Дан инпут. Сделайте так, чтобы вводимый в инпут текст сразу выводился в абзаце под ним.
Модифицируйте предыдущую задачу так, чтобы текст выводился в верхнем регистре.
Дан инпут. Пусть в него вводится число. Сделайте так, чтобы в абзаце по мере ввода выводился квадрат вводимого числа.