[Vue.js] Vue.js v-bind
v-bind
Vue.js 에서 HTML을 구성하는 요소에 값을 설정할 때 사용하는 지시자이다. 속성, css, form 등 다양한 요소 값을 설정할 수 있다.
컴포넌트에 변화가 있을 때 사용하면 좋다. 아래 예시는 마우스가 이미지 안으로 들어왔을 때와 아닐 때 경우에 따라 크기가 바뀌는 모습을 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
str1 : '문자열',
link : 'https://wch18735.github.io',
vue_link : 'https://kr.vuejs.org',
img_src : './image/logo.png',
img_width : '200'
},
methods : {
setImageWidth200 : function(){
this.img_width = '200'
},
setImageWidth300 : function(){
this.img_width = '300'
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<h3></h3>
<a v-bind:href='link'>v-bind link setting</a>
<a :href='vue_link'>
<img alt="" v-bind:src='img_src' :width='img_width' v-on:mouseenter='setImageWidth300' v-on:mouseleave='setImageWidth200'/><br/>
</a>
</div>
</body>
</html>
CSS 클래스 바인딩 (v-bind:class)
HTML 클래스 속성에 CSS 클래스를 바인딩 할 수 있다. 상황에 따라 유동적으로 바인딩 할 수 있으며 이를 이용해 다양한 효과를 구현하는 것이 가능하다.
Vue 객체가 관리하는 특정 태그에 클래스를 삽입해 효과를 적용하는 것이다. 기존에는 <div class="???"> 을 통해 수동 삽입했으나 CSS 클래스 바인딩을 사용하면 이를 간편하게 적용할 수 있으며 유지 보수 역시 원할하게 진행할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<style>
.css1 {
background-color : yellow;
}
.css2 {
color : red;
}
.css3 {
background-color : red;
}
.css4 {
background-color : yellow;
}
</style>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
css1Name : 'css1',
css2Name : 'css2',
isCss1 : false,
isCss2 : false
},
methods : {
reset : function(){
this.css1Name = 'css1';
this.css2Name = 'css2';
},
setCss1 : function(){
this.css1Name = 'css3'
this.css2Name = 'css4'
},
setCss2 : function(){
if(this.isCss1 == true) {
this.isCss1 = false;
this.isCss2 = false;
} else {
this.isCss1 = true;
this.isCss2 = true;
}
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<h3 class='css1 css2'>기존 방식의 css 삽입</h3>
<h3 v-bind:class='css1Name'>css binding</h3>
<h3 v-bind:class='[css1Name, css2Name]'>여러 css class binding</h3>
<button type='button' v-on:click='setCss1'>css1 변경</button>
<button type='button' v-on:click='reset'>reset</button>
<!-- isCss1 값이 true 이면 css 적용 / false 이면 적용 X -->
<h3 v-bind:class='{css1:isCss1}'>문자열</h3>
<h3 v-bind:class='{css1:isCss1, css2:isCss2}'>문자열</h3>
<h3 v-bind:class='[isCss1 ? css1Name : "", isCss2 ? css2Name : ""]'>문자열</h3>
<button type='button' v-on:click='setCss2'>css toggle</button>
</div>
</body>
</html>
inline Style binding
inline style 은 태그 내부에 적용되는 스타일이다. css class 로 지정되지 않은 형태로도 다양한 값들이 설정될 수 있는데, Vue 객체는 inline style 값 역시 삽입, 수정이 가능하다.
background-color 와 같이 - 가 붙는 지시자는 빼기로 받아들이기 때문에 v-bind:style 과 함께 쓰일 때는 카멜 케이스 형식을 따라 backgroundColor 로 표기해야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
bgcolorValue : 'red',
colorValue : 'yellow',
styleValue : {
backgroundColor : 'red',
color : 'yellow'
}
},
methods : {
setInlineStyle : function(){
this.bgcolorValue = 'yellow'
this.colorValue = 'red'
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<h3 style='background-color:red; color:yellow'>문자열</h3>
<h3 v-bind:style='{backgroundColor : bgcolorValue, color:colorValue}'>문자열</h3>
<h3 v-bind:style='styleValue'>객체를 이용한 inline 세팅</h3>
<button type='button' v-on:click='setInlineStyle'>inline css 변경</button>
</div>
</body>
</html>
form 바인딩
HTML 에서 사용하는 다양한 입력 요소들에 대해 바인딩이 가능하다. 사용자가 값을 입력하면 지정된 변수에 값을 자동으로 설정할 수 있다. v-model 로 사용자가 입력한 값을 바인딩할 변수를 설정한다.
이 때, 수식어를 활용하면 다양한 효과를 적용할 수 있다. v-model 에 아래 수식어를 설정해서 직접 어떤 효과가 일어나는지 확인해보자.
- lazy : 입력을 완료했을 때 (포커스를 잃었을 때) 변수에 바인딩
- number : 사용자가 입력한 값이 숫자로만 구성되어 있을 경우 숫자로 변환해 바인딩
- trim : 사용자가 입력한 값 좌우에 공백이 있을 경우 공백을 제거하고 바인딩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
input1 : '초기값',
input2 : '초기값',
input3 : false,
input4 : true,
input5 : false,
input6 : false,
input7 : false,
input8 : false,
input9 : 'r2',
input10 : '',
input11 : '',
input12 : '',
input13 : ''
},
methods : {
checkType : function(){
alert(typeof(this.input12))
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<h3>Input Type Text</h3>
<input type='text' v-model='input1'/><br/>
<h3>input1 : </h3>
<hr/>
<h3>Text Area</h3>
<textarea v-model='input2'></textarea><br/>
<pre>input2 : </pre>
<hr/>
<h3>CheckBox</h3>
<input type='checkbox' v-model='input3'/>체크박스1<br/>
<input type='checkbox' v-model='input4'/>체크박스2<br/>
<input type='checkbox' v-model='input5'/>체크박스3<br/>
<h3>input3 : </h3>
<h3>input4 : </h3>
<h3>input5 : </h3>
<hr/>
<h3>CheckBox Value</h3>
<input type='checkbox' v-model='input6' value='100'/>체크박스100<br/>
<input type='checkbox' v-model='input7' value='200'/>체크박스200<br/>
<input type='checkbox' v-model='input8' value='300'/>체크박스300<br/>
<h3>input6 : </h3>
<h3>input7 : </h3>
<h3>input8 : </h3>
<hr/>
<h3>RadioButton</h3> <!-- v-model 이 같은 것들이 함께 엮임 -->
<input type='radio' v-model='input9' value='r1'>라디오1<br/>
<input type='radio' v-model='input9' value='r2'>라디오2<br/>
<input type='radio' v-model='input9' value='r3'>라디오3<br/>
<h3>input9 : </h3>
<hr/>
<h3>Select Tag</h3> <!-- value 속성 지정하지 않으면 option tag 내부 문자열을 데이터로 사용 -->
<select v-model='input10'>
<option>항목1</option>
<option>항목2</option>
<option value='item3'>항목3</option>
<option value='item4'>항목4</option>
<option value='item5'>항목5</option>
</select>
<h3>input10 : </h3>
<hr/>
<input type='text' v-model.lazy='input11'><br/>
<h3>input11 : </h3>
<input type='text' v-model.number='input12'/><br/>
<h3>input12 : </h3>
<button type='button' v-on:click='checkType'>타입 체크</button><br/>
<input type='text' v-model.trim='input13'/><br/>
<pre>[]</pre>
</div>
</body>
</html>
Leave a comment