09.17 TIL
단방향 바인딩 (적절한 Event 처리 필요)
v-bind="" / v-bind:value=""
양방향 바인딩 (사용자의 입력 값이 코드 상의 변수에 바인딩 / 대표적인 예 : input 태그)
v-model="" / v-model:value=""
데이터 출력
v-text=""
<!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>Review</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
input[type=text] {
border: 2px solid rgb(96, 119, 20);
border-radius: 8px;
}
body {
background-color: #c1d4af;
}
</style>
<body>
<center>
<h3 style="border:2px solid rgb(96, 119, 20);">Review</h3>
<div id="data">
<label for="grade">1. 학년 선택 </label> <br>
<select name="grade" id="grade" v-model="grade">
<option value="1학년">1학년</option>
<option value="2학년">2학년</option>
<option value="3학년">3학년</option>
</select>
<br><br>
2. 수강 과목 선택 <br>
<input type="checkbox" id="sub1" value="국어" v-model:value="subject"> 국어 <br>
<input type="checkbox" id="sub2" value="영어" v-model:value="subject"> 영어 <br>
<input type="checkbox" id="sub3" value="수학" v-model:value="subject"> 수학 <br>
<br>
3. 이름 입력 <br>
<input type="text" id="name" v-model="name" placeholder="이름을 입력해주세요."> <br><br><hr>
<br>
4. 정보 출력 <br><br>
<span v-text="data"></span> 1. 학년 : {{grade}} <br><br>
2. 수강 과목 : {{subject}} <br><br>
3. 이름 : {{name}} <br><br>
</center>
<script>
let model = {
grade: "",
subject: [],
name: ""
};
let choice = new Vue({
el: "#data",
data : model
});
</script>
</div>
</body>
</html>
양방향 바인딩으로 출력 한 화면
