Vue.js 양방향 데이터 바인딩: v-model 디렉티브를 활용하여 입력 양식과 데이터를 연결하기

예제 1: 텍스트 입력

파일명: TextInput.vue

<template>
  <div>
    <input type="text" v-model="message">
    <p>입력된 내용: {{ message }}</p>
  </div>
</template>

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

출력 결과:

<div>
  <input type="text">
  <p>입력된 내용: [입력한 내용]</p>
</div>

설명:
이 예제에서는 Vue의 v-model 디렉티브를 사용하여 입력 양식과 데이터를 양방향으로 바인딩합니다. 사용자가 텍스트 입력란에 값을 입력하면 message 데이터 속성에 자동으로 반영되고, 반대로 message의 값이 변경되면 입력란에도 반영됩니다.

예제 2: 체크박스

파일명: CheckboxInput.vue

<template>
  <div>
    <input type="checkbox" v-model="isChecked">
    <label>체크 여부: {{ isChecked }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

출력 결과:

<div>
  <input type="checkbox">
  <label>체크 여부: false</label>
</div>

설명:
이 예제에서는 Vue의 v-model 디렉티브를 사용하여 체크박스와 데이터를 양방향으로 바인딩합니다. 사용자가 체크박스를 선택하거나 해제할 때마다 isChecked 데이터 속성이 업데이트되고, 라벨에는 해당 값이 표시됩니다.

위의 예제를 통해 Vue.js에서 v-model 디렉티브를 사용하여 입력 양식과 데이터를 양방향으로 연결하는 방법을 자세히 알아보았습니다. 이를 통해 사용자와의 상호작용이 필요한 웹 애플리케이션을 구축하는 데 유용합니다.