v-model
v-model
v-model 속성은 html 태그 v-model은 html 태그에 작성할 수 있는 Vue 전용 속성이며 입력 태그에 작성하여 Vue 백그라운드 데이터와 양방향 연결을 설정할 수 있다.
사용 예제 - 입력창
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를 배우면 변화하는 값에 따라 다양한 화면을 구현할 수 있다.
Last updated