vue.js - 5. v-bind, v-model 디렉티브
●v-bind 디렉티브
- v-bind는 html의 속성을 설정할 때 사용한다.
- 'v-bind:속성'에서 'v-bind'를 생략하고 ':속성'만 써도 된다.(v-bind:src -> :src)
ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="simpleDiv">
<h3>{{text}}</h3>
<input v-bind:value="text">
<img v-bind:src="imgpath">
<br>
<input :value="text">
<img :src="imgpath">
</div>
<script type="text/javascript">
var model01 = {
text : '4번째 예제입니다1',
imgpath : "https://s.pstatic.net/static/www/mobile/edit/2021/0716/mobile_144919923398.png"
};
var test = new Vue({
el : '#simpleDiv',
data : model01
})
</script>
</body>
</html>
●v-model 디렉티브
- v-text, v-html등은 모두 단방향 디렉티브이다.
- v-model은 사용자가 입력한 값으로 모델의 값을 바인딩 해주는 양방향 디렉티브이다..
ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="simpleDiv">
<h3>{{text}}</h3>
<input type="text" v-model="text">
<hr>
<input type="checkbox" value="1" v-model="car">벤츠,
<input type="checkbox" value="2" v-model="car">bmw,
<input type="checkbox" value="3" v-model="car">아우디,
<input type="checkbox" value="4" v-model="car">페라리,
<input type="checkbox" value="5" v-model="car">람보르기니
<br><br>
선택한 자동차:<h v-html="car"></h>
</div>
<script type="text/javascript">
var model01 = {
text : '5번째 예제입니다1',
car : []
};
var test = new Vue({
el : '#simpleDiv',
data : model01
})
</script>
</body>
</html>
