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>