v-bind style
v-bind style
v-bind를 이용하여 동적으로 스타일을 설정할 수 있다. 이를 이용하여 상황에 맞는 다양한 스타일을 적용할 수 있다.
사용 예제 - 글자 크기 변경
<!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>Vue Directive Example</title>
<style>
* {
box-sizing: border-box;
}
.paragraph > h1 {
font-size: 2em;
}
.paragraph > p {
font-size: 0.85em;
}
</style>
</head>
<body>
<div id="app">
<h2>VueJS bind style example</h2>
<button v-on:click="increase">크게</button>
<button v-on:click="decrease">작게</button>
<div class="paragraph" :style="{'font-size':fontSize+'px'}">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt luctus ipsum, non malesuada elit convallis nec. Donec cursus augue convallis, feugiat tortor eget, mattis sapien. Mauris dignissim a risus sed mattis. In arcu eros, ultricies quis feugiat ut, ultricies quis massa. Mauris quis elit feugiat, consectetur felis ut, efficitur sem. Curabitur ultricies porta lectus ut ornare. Duis nec lobortis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac iaculis nibh, non pharetra lectus. Pellentesque sit amet dolor id magna ultrices varius non vitae lectus. Curabitur nec viverra nisi, ac molestie mi. Curabitur vulputate fringilla erat, eu feugiat sem consectetur non. Mauris erat arcu, maximus at porttitor sit amet, maximus et ex. Duis mollis ornare lacus eget elementum. Aliquam at velit vitae arcu viverra pretium a vitae neque. Nullam volutpat, augue at dictum facilisis, turpis nibh ultrices justo, sit amet commodo sapien quam a nisl.
</p>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
fontSize:10,
};
},
methods:{
increase(){
if(this.fontSize < 30){
this.fontSize++;
}
},
decrease(){
if(this.fontSize > 5){
this.fontSize--;
}
},
}
});
app.mount("#app");
</script>
</body>
</html>버튼을 누르면 메소드가 실행되며 fontSize 데이터가 변경된다. 이에 따라 div.paragraph의 font-size가 변경되며 글자 크기가 달라지는 것을 확인할 수 있다.
사용 예제 - range를 이용한 위치 변경
<!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>Vue Directive Example</title>
<style>
* {
box-sizing: border-box;
}
.panel {
position:relative;
width:100%;
height:400px;
border:1px solid black;
overflow: hidden;
}
.panel > .ball {
position: absolute;
width:50px;
height:50px;
border-radius: 50%;
background: black;
}
</style>
</head>
<body>
<div id="app">
<h2>VueJS bind style example</h2>
x : <input type="range" v-model="left" min="0" max="100" step="1"><br>
y : <input type="range" v-model="top" min="0" max="100" step="1"><br>
<div class="panel">
<div class="ball" v-bind:style="{top:top+'%', left:left+'%'}"></div>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
top:0,
left:0,
};
},
});
app.mount("#app");
</script>
</body>
</html>예제에서 동적 스타일이 적용된 부분을 살펴보면 다음과 같다.
<div class="ball" v-bind:style="{top:top+'%', left:left+'%'}"></div>%와 같은 글자를 추가해야 할 경우 문자열 취급해야 하므로 외따옴표 표시를 하여 더해주거나 computed속성을 사용하는 것이 좋다. 스타일이 더 복잡해질 경우 스타일 객체를 이용하는 것이 좋다.
사용 예제 - range를 이용한 위치 변경(style object 방식)
<!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>Vue Directive Example</title>
<style>
* {
box-sizing: border-box;
}
.panel {
position:relative;
width:100%;
height:400px;
border:1px solid black;
overflow: hidden;
}
.panel > .ball {
position: absolute;
width:50px;
height:50px;
border-radius: 50%;
background: black;
}
</style>
</head>
<body>
<div id="app">
<h2>VueJS bind style example</h2>
x : <input type="range" v-model="left" min="0" max="100" step="1"><br>
y : <input type="range" v-model="top" min="0" max="100" step="1"><br>
<div class="panel">
<div class="ball" v-bind:style="styleObject"></div>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
top:0,
left:0,
};
},
computed:{
styleObject(){
return {
top : this.top + "%",
left : this.left + "%"
};
},
},
});
app.mount("#app");
</script>
</body>
</html>이전 사용 예제와 동적 스타일 설정 부분의 차이를 살펴보면 다음과 같다.
<div class="ball" v-bind:style="styleObject">computed:{
styleObject(){
return {
top : this.top + "%",
left : this.left + "%"
};
},
},HTML 태그에 작성하는 식이 복잡할 수록 오류가 발생할 가능성이 높으므로 적용해야할 스타일이 복잡하다면 객체 형태로 설정하는 것이 좋다.
Last updated