다음 코드는 v-model 디렉티브로 양방향 데이터 바인딩합니다. 한 줄 입력 요소에 텍스트를 입력하면 v-model 디렉티브에 바인딩한 message 데이터 속성의 값이 실시간으로 변경됩니다.

ime/src/App.vue

<script>
export default {
  data() {
    return {

      message: '',

    };
  },
}
</script>
<template>

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

</template>

코드를 실행해서 입력 요소에 영문을 입력해 보세요. 실시간으로 데이터가 표시됩니다.