[Vue.js] Vue 양방향 데이터 바인딩 예제

<template>
  <div>
    <!-- 예제 1: 입력 필드 -->
    <input :value="text" @input="updateText">

    <!-- 예제 2: 텍스트 표시 -->
    <div>{{ text }}</div>

    <!-- 예제 3: 입력 필드와 텍스트 표시를 동기화 -->
    <input :value="syncText" @input="syncText = $event.target.value">
    <div>{{ syncText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 입력 필드와 연결된 데이터
      text: '',
      // 입력 필드와 텍스트 표시를 동기화할 데이터
      syncText: '',
    };
  },
  methods: {
    // 입력 이벤트를 통해 데이터를 업데이트하는 메서드
    updateText(event) {
      this.text = event.target.value;
    },
  },
};
</script>

Vue에서는 v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 쉽게 구현할 수 있습니다. 그러나 때로는 v-model을 사용할 수 없는 경우가 있습니다. 이때는 :value와 @input을 사용하여 수동으로 양방향 데이터 바인딩을 구현할 수 있습니다.

1. 예제 1: 입력 필드에 입력한 내용을 text 데이터에 바인딩하고, 입력 이벤트를 통해 데이터를 업데이트하는 방법을 보여줍니다.

2. 예제 2: 입력한 내용을 텍스트로 표시하는 예제입니다. 입력 필드의 내용이 바뀔 때마다 텍스트가 업데이트됩니다.

3. 예제 3: 입력 필드와 텍스트 표시를 동기화하는 예제입니다. 입력 필드에 입력한 내용이 텍스트 표시와 동기화됩니다.

Vue에서는 이러한 방식으로 입력 필드와 다른 요소 간의 데이터를 양방향으로 바인딩하여 사용자 인터페이스를 업데이트할 수 있습니다.