v-model

v-model 속성은 html 태그 v-model은 html 태그에 작성할 수 있는 Vue 전용 속성이며 입력 태그에 작성하여 Vue 백그라운드 데이터와 양방향 연결을 설정할 수 있다.

이 속성은 HTML 표준이 아니므로 Vue application이 제어할 수 없는 영역에 사용하면 아무런 효과가 없다.

사용 예제 - 입력창

v-model의 사용법을 알아보기 위해 예제 코드를 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model example</title>
    <style>
        input, textarea {
            font-size: 20px;
            padding: 0.75em;
            display: block;
            margin:0.5em 0;
        }
        textarea {
            resize: none;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <input type="text" v-model="text">

        <textarea v-model="text" rows="5" cols="50"></textarea>

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    text : "Welcome to Vue JS 3!"
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

예제를 실행하면 별도의 이벤트 설정 없이도 한 군데를 수정하면 반대쪽도 바뀌는 것을 알 수 있다. 이것을 양방향 연결 또는 실시간 연결이라고 표현한다.

Vue application은 화면을 백그라운드 데이터 기반으로 만들도록 권장하기 때문에 입력창과 상호작용할 경우 v-model 속성을 사용하여 data 속성과 연결하면 값의 변경 즉시 데이터에 반영된다. 또한 변경사항은 Vue devtools에서 확인 가능하다. Vue devtools가 설치되지 않은 경우 설치 문서를 확인하여 설치를 진행한다.

사용 예제 - 체크박스 & 라디오버튼

Javascript에서 checkbox의 checked 속성은 논리로 처리된다. 마찬가지로 VueJS에서도 논리 데이터를 data로 선언해두고 체크박스와 연결할 수 있다. 예제 코드를 통해 Vue data의 checkbox와 radio 연동에 대해 살펴본다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model example</title>
    <style>
        div {
            margin:20px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <h1>checkbox</h1>
        <label>
            <input type="checkbox" v-model="agree">
            동의합니다
        </label>

        <div>확인용 : <input type="text" v-model="agree" readonly></div>

        <h1>radio</h1>
        <label>
            <input type="radio" name="fruit" value="딸기" v-model="fruit">딸기
        </label>
        <label>
            <input type="radio" name="fruit" value="사과" v-model="fruit">사과
        </label>
        <label>
            <input type="radio" name="fruit" value="포도" v-model="fruit">포도
        </label>

        <div>확인용 : <input type="text" v-model="fruit" readonly></div>

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    agree:false,
                    fruit:"딸기",
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

예제를 실행하면 checkbox의 변화에 따라 agree가 변하고, radio의 선택 여부에 따라 fruit 값이 변화하는 것을 확인할 수 있다. 입력이 가능한 태그라면 v-model 연결을 통하여 실시간으로 데이터를 관리할 수 있다. 이후 directive를 배우면 변화하는 값에 따라 다양한 화면을 구현할 수 있다.

PreviousIME issue Nexttemplate

Last updated 2 years ago