Step02_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>Step02_model.html</title>
</head>
<body>
<h1>v-model 사용하기</h1>
<div id="app">
<!-- input 요소의 value 를 msg 라는 모델명으로 사용하겠다 -->
<input type="text" v-model="msg" >
<p>{{msg}}</p>
<!-- p 요소의 innerText 에 msg 라는 모델 안에 들어 있는 값을 넣기 -->
<p v-text="msg"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
msg:""
},
methods:{
}
});
</script>
</body>
</html>
모든 value들은 초기값을 미리 지정해야 한다.
<p>{{msg}}</p>
<p v-text="msg"></p>value를 표현하기 위한 두가지 방법이다.
Step02_model2
<!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>Step02_model2.html</title>
</head>
<body>
<h1>v-model 사용하기2</h1>
<div id="app">
<input type="text" v-model="msg">
<br>
<input type="checkbox" v-model="isChecked">
<br>
<select v-model="lunch">
<option value="">선택</option>
<option value="ramen">라면</option>
<option value="kimbap">김밥</option>
<option value="dduk">떡복기</option>
</select>
<br>
<textarea v-model="comment"></textarea>
<br>
<!--
boolean 값으로 관리 하지 않고
원하는 문자열 값으로 관리하기
-->
<input type="checkbox"
v-model="isRun"
true-value="yes"
false-value="no">
<p>
msg : <strong>{{msg}}</strong>
<br>
isChecked : <strong>{{isChecked}}</strong>
<br>
lunch : <strong>{{lunch}}</strong>
<br>
comment : <strong>{{comment}}</strong>
<br>
isRun : <strong>{{isRun}}</strong>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
msg:"",
isChecked:true,
lunch:"",
comment:"",
isRun:"no"
},
methods:{
}
});
</script>
</body>
</html>
여러 폼태그를 vue로 관리, 표현하는 방법이다.
checkbox는 값이 boolean type으로 관리되는데 이를 변경하고 싶다면 true-value, false-value를 활용하여 원하는 문자열 값을 적어 관리하면 된다.
'javascript, framework > vue' 카테고리의 다른 글
| Step07_component (0) | 2022.08.26 |
|---|---|
| vue 사용 예시 (signup_form, 회원가입) (0) | 2022.08.26 |
| Step04~06(style, if, for) (0) | 2022.08.26 |
| Step03_class (0) | 2022.08.26 |
| Step01_event(js간단한 동작 vue를 사용하여 구현) (0) | 2022.08.26 |
