FORM 바인딩

v-bind와 v-on함께 사용하면 input 요소에 양방향 (two-way) 바인딩을 만들 수 있습니다.

<input :value="text" @input="onInput">

function onInput(e) {
  text.value = e.target.value
}

입력 상자에 문자를 입력해 보십시오. <p>안의 문자가 입력된 대로 갱신되는 것을 알 수 있다고 생각합니다.

v-on, v-bind 방식

<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

양방향 (two-way) 바인딩을 단순화하기 위해 Vue는 위의 설탕 구문 (syntax sugar)이라는 지시문을 제공합니다 v-model.

<input v-model="text">

v-model <input>는 값

v-model는 텍스트 입력뿐만 아니라 체크 박스, 라디오 버튼, 선택 상자 등의 다른 입력 유형에서도 작동합니다. 자세한 내용은 가이드 - 양식 바인딩을 참조하십시오.

이제 대신 v-model사용하도록 코드를 리팩토링해 보겠습니다.

v-model

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>