vue: 양방향 바인딩(v-model)

데이터와 UI 양방향 동기화 v-model with chatGPT

 

vue에서 양방향 바인딩은 v-model 디렉티브를 사용하여 데이터와 UI 요소간의 값을 동기화하는 방식입니다. 이는 양방향 데이터 바인딩을 구현하여 데이터가 변경되면 UI가 업데이트되고, UI가 변경되면 데이터가 업데이트되도록 합니다.

 

1.기본 사용법

v-model은 일반적으로 <input>, <textarea>, <select> 등의 폼 요소에서 사용되며, 데이터와 요소 값을 자동으로 동기화합니다.

예제: 기본 입력 바인딩

<template>
<div>
	<input v-model="message" placeholder="메시지를 입력하세요"/>
    <p>입력한 메시지: {{ message }}</p>
</div>
</template>

<script>
export default{
	data(){
    	return {
        	message: '', //입력값과 연결될 데이터
        };
    },
};
</script>

★ Vue SFC Playground 코드 실행 →

• 사용자가 입력필드에 값을 입력하면 message 데이터가 업데이트됩니다. 
• 반대로 message 데이터가 변경되면 입력 필드의 값도 자동으로 업데이트됩니다.

 

2.다양한 폼 요소에서의 사용

(1) 체크박스

<template>
<div>
	<label>
    	<input type="checkbox" v-model="isChecked"/>체크박스 선택
    </label>
    <p>체크상태: {{ isChecked }}</p>
</div>
</template>

<script>
export default {
	data(){
    	return {
         isChecked: false, //체크상태를 저장
        }
    }
};
</script>

★ Vue SFC Playground 코드 실행 →

(2)라디오 버튼

<template>
<div>
	<label>
    	<input type="radio" value="Option1" v-model="selectedOption"/> 옵션 1
    </label>
    <label>
    	<input type="radio" value="Option2" v-model="selectedOption"/> 옵션 2
    </label>
    <p>선택된 옵션: {{ selectedOption }}</p>
</div>
</template>

<script>
export dafult {
	data(){
    	rteturn {
        	selectedOption:''; // 선택된 값 저장
        },
    },
};
</script>

★ Vue SFC Playground 코드 실행 →

(3) 셀렉트박스

<template>
<div>
	<select v-model="selected">
    	<option disabled value=""> 옵션을 선택하세요</option>
        <option value="apple">사과</option>
        <option value="banana">바나나</option>
        <option value="cherry">체리</option>
    </select>
    <p>선택된 값: {{ selected }}</p>
</div>
</template>

<script>
export default{
	data(){
    	return {
        	selected: ''; //선택된 값 저장
        },
    },
};
</script>

★ Vue SFC Playground 코드 실행 →

(4) 셀렉트박스(다중선택)

<template>
  <div>
    <select v-model="selected" multiple>
      <option value="apple">사과</option>
      <option value="banana">바나나</option>
      <option value="cherry">체리</option>
    </select>
    <p>선택된 값: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [], // 선택된 값 배열
    };
  },
};
</script>

★ Vue SFC Playground 코드 실행 →

3. 수식어

v-model에는 사용자 입력값을 제어하기 위한 수식어가 있습니다.

 

(1) .lazy: 입력 필드가 포커스를 잃을 때 값 동기화

<input v-model.lazy="message" />

 

(2) .number: 입력값을 숫자로 변환

<input v-model.number="age" />

 

(3) .trim: 입력값의 공백 제거

<input v-model.trim="username" />

 

4. 컴포넌트에서의 v-model

기본사용법

v-model은 자식 컴포넌트의 props와 emit을 사용하여 부모와 데이터를 양방향으로 바인딩 할 수 있습니다.

 

부모 컴포넌트(parent.vue)

<template>
<div>
	<CustomInput v-model="message"/>
    <p>부모 컴포넌트 메시지: {{ message }}</p>
</div>
</template>

<script>
import CustomInput form './CustomInput.vue';

export dafult {
	consponent: { CustomInput },
    data(){
    	return {
        	message: '',
        };
    },
};
</script>

 

자식 컴포넌트(CustomInput.vue)

<template>
	<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script>
export default{
	props: ['moddelValue'], //v-model 기본 바인딩
};
</script>

★ Vue SFC Playground 코드 실행 →

• 부모는 v-model="medssage"를 통해 message 데이터를 자식에 전달합니다.
• 자식 컴포넌트는 modelValue로 부모 데이터를 받습니다.
• 자식에서 값이 변경되면 update:modelValue 이벤트를 통해 부모에게 변경 사항을 알립니다.

 

5. 다중 v-model

vue3에서는 여러 개의 v-model을 사용할 수 있습니다.

 

부모 컴포넌트

<template>
<CustomInput v-model:title="title" v-model:content="content" />
<p>제목: {{ title }}</p>
<p>내용: {{ content }}</p>
</template>

<script>
import CustomerInput from './CustomInput.vue';

export default{
	component: { CustomerInput },
    data(){
    	return{
        	title: '',
            content: '',            
        };
    },
};
</script>

 

자식 컴포넌트

<template>
  <div>
    <input :value="title" @input="$emit('update:title', $event.target.value)" placeholder="제목" />
    <textarea :value="content" @input="$emit('update:content', $event.target.value)" placeholder="내용"></textarea>
  </div>
</template>

<script>
export default {
  props: ['title', 'content'],
};
</script>

★ Vue SFC Playground 코드 실행 →

• 부모는 v-model:title과 v-model:content를 통해 데이터를 각각 자식의 title과 content에 바인딩합니다.
• 자식은 update:title 및 update:content 이벤트로 부모 데이터를 업데이트합니다.

6. 요약

• v-model은 Vue에서 데이터와 UI를 양방향으로 동기화하는 강력하 도구입니다.
• Vue3에서는 단일 v-model, 다중 v-model, 사용자 정의 모델을 지원하여 더 유연한 데이터 바인딩이 가능합니다.
• 수식어를 사용해 사용자 입력값을 제어할 수 있습니다.
• 사용자 정의 컴포넌트와 함께 사용하면 컴포넌트 간의 데이터 흐름을 간단히 구현할 수 있습니다.