Copy <!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가 설치되지 않은 경우 설치 문서를 확인하여 설치를 진행한다.
Copy <!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> 
