스타일 바인딩

  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 원형섭