[Vue.js] Vue의 양방향 데이터 바인딩과 입력값 처리하기

Vue.js는 단방향 데이터 흐름을 가지고 있지만, 양방향 데이터 바인딩을 통해 쉽게 데이터를 업데이트하고 반영할 수 있습니다. <input> 엘리먼트를 사용하여 입력값을 처리하고, v-model 디렉티브를 이용하여 Vue 컴포넌트의 데이터와 연결할 수 있습니다.

아래는 v-model을 사용한 Vue 컴포넌트의 예제들입니다.

<template>
  <div>
    <!-- 예제 1: 간단한 입력 -->
    <input v-model.trim="msg" />
    <p>입력값: {{ msg }}</p>

    <!-- 예제 2: 숫자 입력 -->
    <input type="number" v-model.number="count" />
    <p>카운트: {{ count }}</p>

    <!-- 예제 3: 체크박스 -->
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked ? '선택됨' : '선택 안 됨' }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '', // 예제 1을 위한 데이터
      count: 0, // 예제 2를 위한 데이터
      checked: false // 예제 3을 위한 데이터
    };
  }
};
</script>

예제 1: 간단한 입력

<input> 엘리먼트에 v-model.trim을 사용하여 입력값의 앞뒤 공백을 자동으로 제거합니다. 입력값이 변경될 때마다 msg 데이터가 업데이트되며, 해당 값이 화면에 실시간으로 반영됩니다.

예제 2: 숫자 입력

숫자를 입력할 때는 v-model.number를 사용하여 문자열 대신 숫자로 데이터를 바인딩합니다. 이를 통해 입력값이 자동으로 숫자로 변환되어 처리됩니다.

예제 3: 체크박스

체크박스의 상태를 처리하기 위해 v-model만 사용합니다. 체크박스가 선택되면 true, 선택되지 않으면 false가 checked 데이터에 바인딩되며, 이를 이용하여 해당 상태를 표시합니다.

이렇게 v-model 디렉티브를 이용하면 Vue 애플리케이션에서 입력값을 손쉽게 처리하고 관리할 수 있습니다.