Vue js 스타일 적용

일반적으로 .css파일을 작성해서 style을 적용시키는 방법말고도 Vue에서는 여러가지 방법으로 적용이 가능해요. 오늘은 Vue에서 style을 적용시키는 방법을 알아보도록 할게요.

Vue 인스턴스 data로 style을 처리하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
  <div id="styletest">
    <button id="a" v-bind:style="mybtn" @mouseover.stop="over" @mouseout.stop="out">test</button>
  </div>
  <script>
    var vm = new Vue({
      el: "#styletest",
      data : {
        mybtn : {
          backgroundColor: 'red',
          border: 'solid 1px gray',
          width: '150px',
          textAlign: 'center',
        }
      },
      methods: {
        over: function(e){
          this.mybtn.backgroundColor="blue";
          this.mybtn.color="white";
        },
        out: function(e){
          this.mybtn.backgroundColor="grey";
          this.mybtn.color="black";
        }
      }
    })
  </script>
</body>
</html>

Vue 인스턴스의 data 부분에 스타일과 관련된 속성을 추가하고 v-bind:style="속성명"으로 style을 bind해주면 되요. 다만 주의 해야할 점은 스타일이 기존에 알고있는 표기법이랑 달라요... 그래서 아마 이건 자주 안쓰일 것 같아요.

Vue 인스턴스 data로 여러개의 style을 처리하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
  <div id="styletest">
    <button id="a" v-bind:style="[mybtn, mybtn2]">test</button>
  </div>
  <script>
    var vm = new Vue({
      el: "#styletest",
      data : {
        mybtn : {
          backgroundColor: 'red',
          border: 'solid 1px gray',
          width: '150px',
          textAlign: 'center',
        },
        mybtn2 : {
          height: '50px'
        }
      }
    })
  </script>
</body>
</html>

여러 개의 스타일을 추가할 땐 위와 마찬가지의 방법을 사용한되 속성명을 []로 묶어 주시면 되요.

Vue 인스턴스 data로 style 속성을 개별적으로 적용하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
  <div id="styletest">
    <button id="a" v-bind:style="{ backgroundColor: mybtn.bc, border: mybtn.bd }">test</button>
  </div>
  <script>
    var vm = new Vue({
      el: "#styletest",
      data : {
        mybtn : {
          bc: 'red',
          bd: 'solid 1px gray'
        }
      }
    })
  </script>
</body>
</html>

속성명대신에 {}를 연 다음 부여하고 싶은 style속성명을 적으시고 생성한 Vue 인스턴스 data 속성을 추가하면 되요.

가끔씩 필요할 것 같긴한데 특정 클래스를 반복해서 사용하는 경우 한 부분의 css 아주 조금 수정하기 위해서 사용할 것 같아요. class 하나 더 만드는 것 보다는 효율적이라고 생각이 들긴하지만 이런식으로 할 경우 유지보수가 힘들어지니 안하는 게 좋을 수도 있겠네요.

Vue 인스턴스 data를 이용한 class 바인딩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
  <style>
    .set1 { background-color: red; }
    .set2 { background-color: green; }
    .set3 { background-color: blue; }
  </style>
</head>
<body>
  <div id="styletest">
    <button id="a" v-bind:class="classbinding">test</button>
    <p>
      <input type="checkbox" v-model="classbinding.set1" value="true"/>1
      <input type="checkbox" v-model="classbinding.set2" value="true"/>2
      <input type="checkbox" v-model="classbinding.set3" value="true"/>3
    </p>
  </div>
  <script>
    var vm = new Vue({
      el: "#styletest",
      data : {
        classbinding : {
          set1: false, set2: false, set3: false
        }
      }
    })
  </script>
</body>
</html>

기본적으로는 v-bind:style과 동일해요. 다만 class는 checkbox를 이용해서(다른 것도 가능) 동적으로 style을 변경할 수가 있어요. 여기서는 각 checkbox가 classbinding이라는 속성의 boolean값들과 데이터바인딩이 되어 있는데요. 즉 set1이 true값을 가져야만 set1 클래스를 바인딩을 하게되는거죠. set2, set3 마찬가지고요. 여기서 주의해야할 점은 classbinding 속성 안에 set1, set2, set3의 순서에요. 왜냐하면 set1이 적용되있는상태에서 set2나 set3가 적용이 될 수 있어요. 하지만 set3가 적용된 상태에서는 set1이나 set2는 적용될수가 없어요. 쉽게 생각하면 class="set1 set2 set3"로 세팅되어있고 여기서 스위치처럼 true/false로 값을 변경하는거라고 생각하시면되요. 그럼 set3가 우선순위가 높다고해야하나요? 같은 스타일속성일 경우에는 set3가 우선적으로 적용되죠. 위 예제를 따라하시고 3번이 체크된상태에서 1번, 2번을 체크해보시면 아실거에요.

보통 class를 이용하여 개발을 많이 하게될텐데 이 점 주의하시길 바랄게요.

Vue 인스턴스 Computed, Methods를 이용한 class 바인딩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
  <style>
    .cant {background-color: red}
  </style>
</head>
<body>
  <div id="styletest">
    <p>You can write 1~10 number</p>
    <div>
      point : <input type="text" v-model.number="num" v-bind:class="info">
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#styletest",
      data : {
        num : 0
      },
      computed : {
        info: function(){
          if(this.num >=1 && this.num <=10)
            return { cant: false };
          else
            return { cant: true };
        }
      }
    })
  </script>
</body>
</html>

computed, methods를 이용해서도 당연히 class binding을 할 수 있어요. 위의 예제들과 거의 비슷한데 computed의 리턴값을 주목할 필요가 있어요. return { cant: false }; 처럼 단일 boolean값이 아니라 클래스명 : boolean 값으로 리턴을 해줘야 해요.

'Front_End > Vue.js' 카테고리의 다른 글

05. Vue.js Dynamic CSS 적용하기 (0)	2018.12.14
03. Vue.js 초간단 Event Handling (1)	2017.12.25
02. Vue.js Vue 인스턴스 옵션 and Life Cycle (0)	2017.12.24
01. Vue.js 기본기: 각종 디렉티브 (0)	2017.12.23
00. Vue.js 설치와 시작 (2)	2017.12.22

04. Vue.js 스타일 적용 방법