[vue/js] Vue 의 html 속성에 변수 양방향 매핑하기 v-model

Vue 의 html 속성에 변수 양방향 매핑하기

해당 포스팅은 Vue 의 공식문서를 참조하여 작성하였습니다.

이런 경우가 생길 수 있습니다. input 같은 경우, input의 value가 바뀜에 따라서 js의 값도 바뀌어야 하고, html에 나타나는 값도 변경되어야 합니다.

이런 경우 앞서 배웠던 v-bind와 v-on을 사용하여 양방향으로 매핑할 수 있습니다. 다음과 같은 방법 입니다.

<script setup>
//v-model 은 input, textArea, select 에만 사용할 수 있음
import { ref } from 'vue'
const text = ref('')

function onInput(event) {
    console.log("123");
    text.value = event.target.value;
}
</script>

<template>
    <div>
        <h1>v-model 미사용</h1>
        <input type="text" v-bind:value="text" v-on:input="onInput" placeholder="입력해주세요.">
        <p></p>
    </div>
</template>

<style></style>

v-bind 의 값으로 text 라는 ref를 넣어주고, input 이벤트에서 onInput 함수를 호출하는 방식입니다.

하지만 이런 방식의 로직은 자주 사용하기 때문에, v-model이라는 디렉티브를 사용할 수 있습니다.

다음은 v-model을 사용한 예제입니다.

<script setup>

import { ref } from 'vue'
const text = ref('')

</script>

<template>
    <div>
        <h1>v-model 사용</h1>
        <input type="text" v-model="text" placeholder="입력해주세요." />
        <p></p>
    </div>
</template>

<style></style>

v-model이라는 디렉티브를 사용하면 코드가 더 줄어드는것을 확인할 수 있습니다.

단, v-model은 input, textArea, select 태그에만 사용할 수 있습니다.