05. 스타일

<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>

<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>

<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>