CSS 클래스 바인딩

  • css 클래스 바인딩 : HTML의 class 속성에 css클래스를 바인딩할 수 있다.

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .css1{
            background-color: yellow;
        }
        .css2{
             color: red;
        }
        .css3{
            background-color: red;
        }
        .css4{
            color : yellow;
        }
    </style>
</head>
<body>
 
    <div id="test1">
        <h3 class='css1 css2'>문자열</h3>
        <h3 v-bind:class='css1Name'>문자열</h3>
        <h3 v-bind:class='[css1Name, css2Name]'>문자열</h3>
        <button type="button" v-on:click='setCss1'>css1변경</button>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el : '#test1',
        data : {
            css1Name : 'css1',
            css2Name : 'css2'        
        },
        methods : {
            setCss1 : function(){
                this.css1Name = 'css3'
                this.css2Name = 'css4'
            }
        }
    })
</script>
</body>
</html>
cs




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
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .css1{
            background-color: yellow;
        }
        .css2{
             color: red;
        }
        .css3{
            background-color: red;
        }
        .css4{
            color : yellow;
        }
    </style>
</head>
<body>
 
    <div id="test1">
        <h3 class='css1 css2'>문자열</h3>
        <h3 v-bind:class='css1Name'>문자열</h3>
        <h3 v-bind:class='[css1Name, css2Name]'>문자열</h3>
        <button type="button" v-on:click='setCss1'>css1변경</button>
 
        <hr>
 
        <h3 v-bind:class='{css1:isCss1, css2:isCss2}'>문자열</h3>
        <button type="button" v-on:click='setCss2'>Css true설정</button>
        <button type="button" v-on:click='removeCss2'>Css false설정</button>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el : '#test1',
        data : {
            css1Name : 'css1',
            css2Name : 'css2',
            isCss1 : false,
            isCss2 : false    
        },
        methods : {
            setCss1 : function(){
                this.css1Name = 'css3'
                this.css2Name = 'css4'
            },
            setCss2 : function(){
                this.isCss1 = true
                this.isCss2 = true
            },
            removeCss2 : function(){
                this.isCss1 = false
                this.isCss2 = false
            }
        }
    })
</script>
</body>
</html>
cs


저작자표시

'Vue' 카테고리의 다른 글

이벤트 버스 형식  (0) 2019.08.01
props, event emit 컴포넌트의 유효범위  (0) 2019.07.31
속성값 바인딩하기  (0) 2019.07.31
set, get  (0) 2019.07.31
Watch 와 Computed  (0) 2019.07.31

+ Recent posts

티스토리툴바