반응형
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <style type="text/css">
            div.active { border : solid 1px yellow;}
            div.text-danger { color : red;}
        </style>
 
        <div id = "app" >    
            <div v-bind:class="classObject">
                <input type="text" v-model = "first" placeholder="First name">
                <input type="text" v-model = "last" placeholder="Last name">
                <input type="checkbox" id = "checkbox" v-model ="isActive">
                <label for="checkbox"> CSS :: {{ isActive }} </label>
                <p> {{ fullName }} </p>
                <p>first :: {{ first }} </p>
                <p>last :: {{ last }} </p> 
            </div>
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    first : '',
                    last : '',
                    fullName : '',
                    isActive: false,
 
                    classObject:{
                        active : this.isActive,
                        'text-danger' : true
                    },
                },
                watch:{
                    first :function(val){
                        this.fullName = val + ' ' + this.last;
                    },
                    last : function(val){
                        this.fullName = this.first + ' ' + val;
                    },
                    isActive : function(){
                        console.log("active : %s", this.isActive);
                        this.classObject.active = this.isActive;
                    }
                }
 
            })
        </script>
    </body>
</html>
cs


체크박스 및 watch를 이용하여 css on/off 기능을 구현 할 수 있다.


우선 first와 last는 watch를 통해 감시되고 있다.


그리고 checkbox는 isActive를 감시하고 있는데 체크가 되어있으면 true 체크가 풀리면 false이다.


마지막으로 watch를 보면 isActive를 감시하고 있는데 이때 classObject.active의 값을 T / F로 다루고 있다.

이 classObject를 보면 active는 isActive를 따르고 있게 된다. 따라서 active가 활성화 되면 노란 박스가 형성되게 된다.



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
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <style type="text/css">
            div.active { border : solid 1px yellow;}
            div.text-danger { color : red;}
        </style>
 
        <div id = "app" >
            <div class="active text-danger"> classObject 값이 한번에 적용 </div>
        </div>
 
        <script>
            var app = new Vue({
                el : '#app',
 
            });
 
        </script>
    </body>
</html>
cs


이때 css가 확정적이라면 굳이 v-bind가 필요없다.


즉, 원래대로 css를 적용하던 대로 하면 된다.


css 네이밍을 할 때 #hello이면 id가 hello인 것을 찾게되고, 

.hello이면 class가 hello인 것을 찾게 된다.



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
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app" >
            <input type="text" v-model="activeColor">
            <div v-bind:style="{ color : activeColor, fontSize: fontSize }"> classObject 값이 한번에 적용 </div>
        </div>
 
        <script>
            var app = new Vue({
                el : '#app',
                color:'',
                data:{
                    activeColor : 'red',
                    fontSize : 30 + 'px'
                }
            });
 
        </script>
    </body>
</html>
 
cs


activeColor이 현재 input으로 받아지고 있다.


이 값이 변함에 따라 v-bind:style로 인라인 코드화 되어있는 color : activeColor에 의해 색상이 변경 될 수 있다.


blue 혹은 green을 입력해보자.






반응형
저작자표시 비영리 변경금지

'Basic > VueJS' 카테고리의 다른 글

[VueJS] 키보드 및 마우스를 이용한 이벤트 동작  (0) 2018.07.28
[VueJS] v-on 디렉티브를 이용한 다양한 기능 사용하기  (0) 2018.07.26
[VueJS] computed, watch 속성  (0) 2018.07.22
[VueJS] v-if 디렉티브 및 v-show 디렉티브  (0) 2018.07.20
[VueJS] v-for 디렉티브 및 정렬 방법  (0) 2018.07.18

티스토리툴바