Vue v Model: Основы взаимодействия между Vue.js и моделью данных

В Vue.js v-model является синтаксическим сахаром для двусторонней привязки данных между компонентом и элементом формы. Он позволяет обновлять данные в компоненте при изменении элемента формы и наоборот.

Пример 1: привязка значения input к компоненту

html

В данном примере при вводе текста в поле input, значение message обновляется и отображается в теге `p`.

Пример 2: привязка значения checkbox к компоненту

html

Здесь, при изменении состояния чекбокса, значение checked обновляется и отображается в теге `p`. Если чекбокс отмечен, то значение checked будет `true`, а если не отмечен - `false`.

Пример 3: привязка значения select к компоненту

html

В данном примере, при выборе опции из `select`, значение selectedOption обновляется и отображается в теге `p`.

Таким образом, использование v-model позволяет легко установить двустороннюю привязку данных и обновлять их между компонентом и элементом формы без необходимости явно обрабатывать события изменения.