[Vue.js] 여러 줄 메시지 입력을 위한 Vue 양방향 데이터 바인딩 예제

<template>
  <div>
    <!-- 예제 1: 여러 줄 메시지 표시 -->
    <span>여러 줄 메세지:</span>
    <p style="white-space: pre-line;">{{ message }}</p>

    <!-- 예제 2: 여러 줄 입력 필드 -->
    <textarea v-model="message" placeholder="여러 줄을 추가해보세요"></textarea>

    <!-- 예제 3: 메시지 초기화 버튼 -->
    <button @click="clearMessage">메시지 초기화</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 입력된 여러 줄 메시지를 저장하는 데이터
      message: ''
    };
  },
  methods: {
    // 메시지 초기화 메서드
    clearMessage() {
      this.message = '';
    }
  }
};
</script>

Vue에서는 v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 구현할 수 있습니다. 이를 활용하여 여러 줄의 텍스트를 입력하고 표시하는 예제를 살펴보겠습니다.

1. 예제 1: message 데이터를 사용하여 여러 줄 메시지를 표시하는 부분입니다. <p> 요소에 white-space: pre-line; 스타일을 적용하여 텍스트 내의 줄바꿈을 보존합니다.

2. 예제 2: v-model 디렉티브를 사용하여 여러 줄 입력 필드를 구현하는 부분입니다. 사용자가 여러 줄의 텍스트를 입력할 수 있으며, 입력된 내용은 message 데이터에 자동으로 반영됩니다.

3. 예제 3: 입력된 메시지를 초기화하는 버튼입니다. 사용자가 "메시지 초기화" 버튼을 클릭하면 입력된 메시지가 초기화됩니다.

Vue의 양방향 데이터 바인딩을 활용하면 사용자가 입력한 내용을 즉시 반영하고 다양한 상호작용을 구현할 수 있습니다.