Web_Vue/step13_classBind.html at main · Playdata-Bigdata-Course/Web_Vue · GitHub

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*
        .set1 {
            background-color: yellow;
            color: purple;
        }
        . : class 속성 의미
        .set1 : class="set1" 의미
        background-color : 배경색
        color1 : 폰트색
        */
        .set1 {
            background-color: yellow;
            color: purple;
        }

        .set2 {
            text-align: center;
            width: 220px;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 제공 start -->
    <dl>
        <dt>
            <h3>CSS class binding : Vue 미적용, 적용 비교하기</h3>
        </dt>
        <dd>
            1. css class를 binding하기 위해 v-bind:class 사용
        </dd>
        <br>

        <dd>2. 개별 class 단위로 true인 경우 class style 적용</dd>
        <br>

        <dd>3. 동작 : checkbox 클릭해서 css 동적으로 적용해 보기</dd>
        <br>

        <dd>4. Vue 미적용 : class를 동적으로 적용한 코드인 경우 <br>

            <button id="btn1">1. class 속성 적용 버튼</button>
            <p>
                <!-- this 즉 이벤트가 발생된 tag 자체를 객체로 인지를 해서 this 키워드로 객체를 전송
                    value="true" : checkbox가 체크가 되어 있는 상태
                    value="false" : "   "가 uncheck 되어있는 상태
                -->
                <input id="set1" type="checkbox" value="false" onclick="btnChange1(this)" />set1 : 버튼색 변경<br />
                <input type="checkbox" value="false" onclick="btnChange2()" />set2 : 버튼 width 사이즈 변경<br />
            </p>
        </dd>
    </dl>
    <script>
        //vue 없이 직접 동적 처리를 위한 순수 자바스크립트 코드였음
        //vue 적용 코드와 개발 생산성 비교 해 보기
        function btnChange1(v) {
            console.log(v.value);
            btn1 = document.getElementById("btn1");

            if (v.value === "false") {
                btn1.style.backgroundColor = "yellow";
                btn1.style.color = "purple";

                btn1.style.width = "220px";
                v.value = true;
            } else {
                btn1.style.backgroundColor = "lightgray";
                btn1.style.width = "170px";
                v.value = false;
            }
        }
    </script>
    <br>
    <hr><br>

    <!-- 제공 end-->


    <dd> 5. Vue 적용 : 간결한 코드 <br>
        <div id="app">
            <!-- ???
                v-bind:class - style 적용 부분 즉 class 속성에 다음과 같이 개발 하겠다는 의미
                {set:s1, set:s2}
                class="set1 set2" : set1 과 set2라는 css의 설정을 동시에 적용하겠다는 설정

                v-bind:class{set1:s1, set2:s2}
                    s1과 s2값이 true인 경우 적용, false인 경우 미적용
            -->

            <button v-bind:class = "{set1:s1, set2:s2}"  >2. class 속성 적용 버튼</button>
            <p>
                <input type="checkbox" v-model="s1" value="true" />set1 : 버튼색 변경<br />
                <input type="checkbox" v-model="s2" value="true" />set2 : 버튼 width 사이즈 변경<br />
            </P>
        </div>
    </dd>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app", //vue 설정
            data: {     //model
                s1: false,
                s2: false,
            }
        })
    </script>
</body>

</html>