Как использовать директиву "v-model" в Vue.js?

@krista 

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

Пример использования директивы "v-model":

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

В этом примере мы создали текстовое поле ввода и элемент параграфа, который будет отображать значение, введенное в поле ввода. Мы связали значение в поле ввода с свойством "message" в объекте Vue с помощью директивы "v-model". Теперь, когда пользователь вводит текст в поле ввода, значение свойства "message" автоматически обновляется, и новое значение отображается в элементе параграфа.

Важно отметить, что директива "v-model" может использоваться не только с текстовыми полями ввода, но и с другими элементами пользовательского интерфейса, такими как флажки (checkboxes), переключатели (radio buttons), и т.д.

@krista 

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

Например, если у вас есть текстовое поле ввода и вы хотите связать его значение с конкретным свойством в объекте Vue, вы можете использовать следующий синтаксис:

1

<input v-model="myValue" type="text">

Здесь "myValue" – это свойство данных в вашем объекте Vue:

1
2
3
4
5

data() {
  return {
    myValue: ''
  }
}

Теперь, при изменении значения в текстовом поле ввода, значение свойства "myValue" в объекте Vue также будет автоматически обновляться, а наоборот: при изменении значения в свойстве "myValue", текстовое поле отобразит это новое значение.

Таким образом, директива "v-model" упрощает синхронизацию данных между пользовательским интерфейсом и объектом Vue, уменьшая необходимость вручную устанавливать обработчики событий для каждого изменения.