9.[Vue.js] 클래스, 스타일 바인딩

  클래스 바인딩과 스타일 바인딩은 말 그래도 HTML 속성에 있는 클래스와 스타일을 Vue.Js로 바인딩 하는 것을 의미한다. 우리가 CSS로 만든 클래스나 스타일이 만들고, 우리가 원하는 액션을 취할 때마다 클래스와 스타일 변경이 가능하도록 만들어 주는 기능이다. 주로 액션에 따른 웹 디자인 변화에 쓰이게 된다.

1. 클래스 바인딩

  앞서 만들었던 예제에서 버튼을 CSS를 활용 해 위와 같은 디자인으로 변경했다. 이번엔 Number라는 숫자가 음수를 허용해서는 않게 만들기 위해 Minus 버튼을 Number가 0이 되는 경우 더이상 작동하지 않도록 만든다고 가정해보자. 

  우선 위의 버튼에 CSS는 아래와 같다.

    .btn{
      height: 30px;
      width: 80px;
      font-size: 15px;
      border: 1px solid skyblue;
      background-color: rgba(0,0,0,0);
      color: skyblue; padding: 5px;
    }
    .disabledButton{
      background-color: gray;
    }

  - Class btn : 기본 버튼 클래스

  - Class disabledButton : 버튼을 못 누르게 될 시 색상 변경

  CSS 클래스를 위와 같이 2개로 만든다. HTML의 경우 id는 고유의 값만 사용 가능하지만 class는 다중으로 사용 가능하다. 즉, HTML 코드로 본다면 이런 구조로 단순화 시킬 수 있다.

1) 버튼 사용 가능 한 경우

<button class="btn">Minus</button><br>

2) 버튼 사용 불가능한 경우

<button class="btn disabledButton">Minus</button><br>

  그리고, Number가 0에 도달할 떄 Minus 버튼을 비활성화 시켜야 한다.

<button class="btn disabledButton"

        :disabled="NotAllowedNegative">
        Minus</button><br>
 
 Colored by Color Scripter

  NotAllowedNegative가 True인 경우 해당 버튼은 비활성화 될 것이고, False인 경우 해당 버튼은 활성화 된다. 해당 내용을 담은 로직을 Computed에 추가 시켜 준다.

        var app = new Vue({
 
          computed: {
            NotAllowedNegative: function(){
              if(this.Number == 0) return this.NotAllowedNegative = true
              else return this.NotAllowedNegative = false
            }
          },
 
        })

  그다음 이제 클래스 적용을 위한 바인딩을 HTML 속성에 추가시켜 준다.

 <button class="btn"
         :disabled="NotAllowedNegative"
          v-bind:class="{ disabledButton: NotAllowedNegative }"
          @click="Minus()"
          >Minus</button><br>

  이와 같은 방식으로 클래스 바인딩을 구현 할 수 있다. 

2. 스타일 바인딩

  이번엔 스타일을 바인딩 시키는 방법에 대해 알아보자. 아래 Number에 있는 폰트를 Plus 버튼을 누르는 경우 빨간색으로 변경하고. 마이너스 버튼을 누르는 경우 파란색으로 변경한다고 가정해보자. 각각의 경우에 따른 스타일과 홈페이지는 다음과 같이 나온다.

1) Plus (Red)

<p :style="{ color : 'red' }">Number : {{Number}}</p>

2) Minus (Blue)

<p :style="{ color : 'blue' }">Number : {{Number}}</p>

이처럼 색상 변경을 원한다면 color에 들어갈 변수의 변경이 필요하다. 스타일 바인딩을 위해선 color 속성에 들어가게 되는 값을 변수로 선언하면 된다. 

<p :style="{ color : pluscolor }">Number : {{Number}}</p>

  

  컬러 속성을 변경하는 변수를 'pluscolor'로 선언한다. 그리고 해당 변수를 Vue 인스턴스의 데이터에 선언한다.

          data: {
            pluscolor: 'blue',
          },

  이제 plus / minus 메소드에 해당 변수를 변경시켜주는 로직을 추가 시키면 된다.

          methods: {
            Plus: function(){
              this.Number += 1
              this.pluscolor = 'red'
            },
            Minus: function(){
              this.Number -= 1
              this.pluscolor = 'blue'
            },
          },

3. 실습

  이번엔 스타일 바인딩과 클래스 바인딩을 이용한 웹 페이지를 만들어보자. 

1) 스타일 바인딩 - 팀 이름

  팀 이름의 경우 h2 태그를 이용해 만든다. 그리고 팀 명에 따라 고유의 색상으로 font-color를 지정한다. 이를 위해서 각 팀별로 색상을 받아 스타일 바인딩을 구현한다.

<h2 :style="{ color: select.Color }">{{ select.Name }}</h2>

  

2) 클래스 바인딩 - 순위

  NBA의 경우 상위 8개 팀이 플레이오프에 진출 할 수 있다. 만약 플레이오프에 진출할 수 있는 팀울 선택하면 순위 색상을 변경하는 방식으로 클래스 바인딩을 구현한다.

- CSS

    .playoff{
      color: gold;
    }
    .underrank{
      font-size: 20px;
    }

- HTML

<div class="underrank" v-bind:class ="{ playoff: select.POpossible }">Rank : {{ select.Rank }}</div><br>

  기본적으로 사용하는 클래스는 "underrank" 이고, 플레이오프 진출 클래스는 "playoff" 를 사용한다.

  나머지 요소들은 모두 앞에서 다룬 내용이므로 생락한다.

 - 웹사이트 주소

https://adrian0220.github.io/Webclient/NBAteamInfo.html