Vue - 스타일!

작성일 Edited on In

vue 스타일

<style> 태그에 CSS를 정의하거나 요소에 직접 style 속성을 정의한다.

vue.js 에선 효율적인 CSS 적용을 위해 vue 스타일 객체를 사용한다.

vue 스타일 정의 후 vue 인스턴스 에 해당 스타일을 매칭시킨다.

CSS 에선 케밥표기법(ex:font-szie)를 사용하지만 vue 스타일 에선 카멜표기법(ex:fontSize) 를 사용

v-bind:style

사실 vue 스타일 은 v-bind 를 통해 style 속성을 정의하는 것이다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="example">
    <button id="a" v-bind:style="style1">테스트</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#example",
        data: {
            style1: {
                backgroundColor: "aqua", 
                border: 'solid 1px gray',
                with: '100px', 
                textAlign: 'center'
            }
        }
    });
</script>

적용된 vue 스타일 은 자동으로 케밥표기법으로 변환되어 style 속성에 지정된다. 

1
2
3
<button id="a" style="background-color: aqua; border: 1px solid gray; text-align: center;">
    테스트
</button>

v-bind:class

<style> 태그로 미리 class 에 대한 CSS 를 지정해 두고 v-bind 로 class 속성을 지정하는 방식

v-bind:class 깂으로 객체리터럴 혹은 배열리터럴을 전달할 수 있다.

객체리터럴의 경우 형식의 <className, boolean> 형식의 객체로 class 속성값을 지정한다.
boolean 값이 true 라면 해당 class 이름을 사용하고 false 라면 사용하지 않는다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
    div.active { border: solid 1px blue; }
    div.text-danger { color: red; }
</style>
<div id="app">
    <div v-bind:class="classObject">classObject 값이 한 번에 적용되었습니다.</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            classObject: {
                active: true,
                'text-danger': false // 하이폰 사용시 '' 로 감쌓아야함
            }
        }
    });
</script>

배열리터럴로 전달할 경우 [className] 형식을 배열을 전달한다.

보통을 배열을 data 옵션에 담아 전달하는 방법을 많이 쓴다. 

1
2
3
4
5
6
7
8
<div id="app">
    <span v-bind:class="['active', 'text-danger']">abc</span>
</div>
<script>
    var app = new Vue({
        el: '#app',
    });
</script>

주의사항

클래스의 사용여부를 vue 인스턴스 생성 후 다시 설정하고 싶다면
full name 으로 속성에 접근해서 값을 수정해야 한다. 

1
2
// full name 으로 접근해야한다
app.classObject[‘text-danger’] = true
1
2
3
4
5
6
7
8
9
// 아래처럼 별도의 참조변수를 사용하면
// 향후 vm.isActive = true 로 변경해도 아무일도 일어나지 않음
data: {
    classObject: {
        active: this.isActive,
        'text-danger': false
    },
    isActive: false 
}

v-bind:style wth computed

data 옵션만을 사용해 style 속성을 지정하지 않아도 된다.
computed 로도 가능하다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
    <p v-bind:style="styleObject">1</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        computed: {
            styleObject: function () {
                return {
                    'margin-before': '4em',
                    background: 'blue'
                };
            }
        }
    });
</script>

v-bind:class wth computed

v-bind:class 역시 computed 속성을 사용하면 캐시효과로 인한 빠른 랜더링처리와
CSS 에 사용할 객체의 true, false 여부를 외부 데이터를 참조하여 처리 가능하다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var vm = new Vue({
    el: '#app',
    data: {
        isActive: true,
        error: null
    },
    computed: {
        classObject: function () {
            return {
                'active': this.isActive && !this.error, // false
                'text-danger': this.error && this.error.type === 'fatal' // false
            }
        }
    }
});