Web_Vue/step05_direciveLoop.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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step05_direciveLoop</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <h2>v-for directive</h2>

    1. 반복해서 화면에 데이터를 렌더링 할 수 있는 directive <br>
    <!-- View-->

    <div id="app">
        <dl>
            <dt>1. java script 리터럴 객체의 데이터값 반복해서 렌더링</dt>
            <dd>
                <!--반복문 자체 반환 데이터 순서 : 값 -> property명(변수명, 속성명, key명)-->
                <li v-for="(value, key, index) in alias">
                    {{index +1}} - 속성명 : {{key}} , 값 : {{value}}
                </li>
            </dd>
            <hr>

            <dd>
                <!-- 반복문 자체 반환 데이터 순서 : 값 -> property-->
                <li v-for="(key, value) in alias">
                    속성명 : {{key}} , 값 :{{value}}
                </li>
            </dd>

            <hr>
            <dt>2. 배열 데이터를 렌더링</dt>
            <dd>
                <!-- 배열인 경우 반복문 내부에서 반환되는 값은 값 -> 배열요소(값)의 index-->
                <li v-for="(value, keyindex) in favorite">
                    {{keyindex + 1}}-{{value}}
                </li>
            </dd>

            <hr>
            <dt>3. 배열 데이터 + 조건식(v-if, ==)을 반영해서 렌더링</dt>
            <dd>
                <!-- 배열인 경우 반복문 내부에서 반환되는 값은 값 -> 배열요소(값)의 index-->
                <li v-for="(value, keyindex) in coffees" v-if="value=='모카'">
                    선호하는 커피 = {{value}}
                </li>
            </dd>

            <hr>
            <dt>4.emp의 firstName, lastName value값 렌더링</dt>
            <dd>
                <!-- ? emp의 firstName, lastName value값 렌더링-->
                <li v-for="(value, keyindex) in emp">
                    {{keyindex}}-{{value.firstName}} {{value.lastName}}

                </li>
            </dd>

            <hr>
            <dt>5.key값들만  렌더링</dt>
            <dd>
                <!-- ? emp의 firstName, lastName value값 렌더링-->
                <div v-for="employee in emp">
                    <li v-for="(value, key) in employee">{{key}}</li>
                </div>
            </dd>

            <hr>
            <dd>
                <dt> 6. template tag : 여러 element들을 묶어서 관리 및 표현 반복렌더링시에 권장, 요소들 그룹핑시 주로 사용</dt>
                <template v-for="(value, key) in favorite">
                    <li> 취미 : {{value}} </li>
                    <!-- keyindex가 짝수일때 수평선 추가 -->
                    <hr v-if="key%2 == 0">
                </template>
            </dd>
        </dl>
    </div>
    <script>
        //model
        let model = {
            favorite: ["코딩", "코딩영상보기", "빈둥거리면서 알고리즘 생각하기", "코딩으로 몽상하기"],
            coffees: ["아메리카노", "라떼", "돌체라떼", "모카"],
            alias: {    //객체
                name: "권김김오민재민건웅",
                nickName: "IOSANDROID Human"
            },
            emp: [
                { "firstName": "John", "lastName": "Doe" },
                { "firstName": "Anna", "lastName": "Smith" },
                { "firstName": "Peter", "lastName": "Jones" }
            ]
        }
        //ViewModel
        let vm = new Vue({
            el: "#app",
            data: model
        });

    </script>
</body>

</html>