05. 스타일

in Vue

스타일 바인딩

  1. :style을 활용하고, 인자로 css 객체를 넘겨 적용하거나
  2. 개별적인 속성 하나하나를 바인딩 가능(비추천-유지보수 힘듬)
  3. 여러 스타일 객체 바인딩 :style=”[스타일1, 스타일2]”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="example">
<!-- 바인딩 방법 1 -->
<button id="a" v-bind:style="style1" @mouseover.stop="overEvent"
@mouseout.stop="outEvent">테스트</button>

<!-- 바인딩 방법 2 -->
<div :style="{ backgroundColor: style2.bc, width:style2.w+'px', height:style2.h+'px' }"></div>

<!-- 복수 스타일 바인딩 -->
<div :style="[myColor, myLayout]"></div>
</div>

<script>
var vm = new Vue({
el : "#example",
data : {
style1 : { backgroundColor:"aqua", border:'solid 1px gray',
with:'100px', textAlign:'center' },
style2 : { bc:"yellow", bd:'solid 1px gray', w:200, h:100 },
myColor : { backgroundColor: 'purple', color: 'yellow' },
myLayout : { width: '150px', height: '80px' }
},
methods : {
overEvent : function(e) {
this.style1.backgroundColor = "purple";
this.style1.color = "yellow";
},
outEvent : function(e) {
this.style1.backgroundColor = "aqua";
this.style1.color = "black";
}
}
})
</script>

클래스 바인딩

  1. :class=”{ 클래스명 : true/false, 클래스명 : true/false }”와 같이 반영한다.
  2. 객체의 속성을 style명과 동일 하게 가져가면 더 직관적으로 사용이 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.set1 { background-color: aqua; color:purple; }
.set2 { text-align:center; width:120px; }
.set3 { border:sandybrown dashed 1px; }
</style>
<div id="example">
<button id="btn1" :class="{ set1:s1, set2:s2, set3:s3 }">버튼1</button>
<button id="btn2" :class="myStyle">버튼1</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#example",
data : {
s1 : false,
s2 : false,
s3 : false,
// 객체 속성 이름과, style명을 동일하게 가져간다.
mystyle : { set1: false, set2: false, set3: false }
}
})
</script>

계산형 속성을 이용!

v-model에 바인딩한 데이터를 computed 시켜, { 클래스명 : true/false }를 리턴하여 사용할 수도 있다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
.score { border:solid 1px black; }
.warning { background-color: orange; color:purple; }
.warnimage { width:18px; height:18px; top:5px; position:relative; }
</style>

<div id="example">
점수 : <input type="text" class="score"
v-model.number="score" v-bind:class="info" />
<img src="images/error.png" class="warnimage" v-show="info.warning" />
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#example",
data : {
score : 0
},
computed : {
info : function() {
if (this.score >= 1 && this.score <= 100)
return { warning:false };
else
return { warning:true };
}
}
})
</script>

Reference

Vue.js Quick Start 원형섭

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea