V-bind는 단방향 바인딩 이기에 사용자 입력에 값이 변하지 않는다. 그러나 V-model은 사용자 입력에 맞춰 값이 변한다.
[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)
[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)
1. V-bind란?
사용 예시
- 내부 함수 동작으로 HTML 요소를 조작해야 할 때
- 데이터 객체 값에 따른 조건부 렌더링을 해야할 때
2. V-bind 코드로 살펴보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input v-bind:value="name" />
<br />
내 이름은 <span>{{name}}</span>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
const vm = Vue.createApp({
name: "App",
data() {
return { name: "" };
},
}).mount("#app");
</script>
</body>
</html>
3. V-model이란?
사용 예시
- 사용자가 input 요소에 입력한 값을 화면에 보여줘야 할 때
4. V-model 코드로 살펴보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input v-model="name" />
<br />
내 이름은 <span>{{name}}</span>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
const vm = Vue.createApp({
name: "App",
data() {
return { name: "" };
},
}).mount("#app");
</script>
</body>
</html>
'vue > 기초 공부' 카테고리의 다른 글
| [Vue] v-show와 v-if의 차이 (0) | 2024.05.04 |
|---|