Vue'до инпуттерге эки тараптуу маалыматтарды байлоо

Азыр биз Vue фреймворгунда инпуттер менен иштөөнү үйрөнөбүз. Алардын жардамы менен биз баракка реактивдүү түрдө маалымат кошобуз. Келгиле, баштайлы. Бизде инпут бар деп коёлу:

App.vue<template>
  <input>
</template>

Ошондой эле бизде message касиети бар деп коёлу:

javascriptdata() {
  return {
    message: 'hello',
  }
}

Биз бул касиетти жана инпутту алардын ар биринин өзгөрүшү экинчисинин өзгөрүшүнө алып келгендей кылып байлай алабыз. Бул v-model директивасынын жардамы менен жасалат, ал инпутко байланган касиетти көрсөтөт.

Келгиле, инпутубузга message касиетин байлайлы:

App.vue<template>
  <input v-model="message">
</template>

Код иштетилгенден кийин инпутта message касиетинин тексти турган болот. Эгерде инпуттун ичиндеги маалыматтарды түзөтсөңүз - касиет дагы ошол сыяктуу өзгөрөт. Муну көрүү үчүн, келгиле, инпутка киргизилген мазмунду бирон жердеги абзацта чыгаралы:

App.vue<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>