반응형





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
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <dl>
                <template v-for = "obj in object">
                    <dt> {{ obj.firstName }} </dt>
                    <dt> {{ obj.lastName }} </dt>
                    <dd> {{ obj.age }} </dd>
                </template>
            </dl>    
        </div>
        
        <script>       
            var vm = new Vue({
                el : '#app',
                data:{
                    object :[
                        {
                            firstName : 'JoongMin',
                            lastName : 'Lee',
                            age : 39
                        },
                        {
                            firstName : 'hello',
                            lastName : 'world',
                            age : 20
                        }
                    ]
                }
            })
 
        </script>
    </body>
</html>
cs


v-for 문법을 통해 Vue에서 배열을 순회할 수 있다. 이때 for x in values 같은 꼴은 python이나 cpp이나 모두 비슷하게 쓰인다.


여기서 쓰인 template는 Vue에서 사용되는 태그로써 실제로 DOM에는 나타나지 않는다.




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
// 정렬 조건을 이용한 정렬
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <div v-for="item in items">
                <span>
                    {{item.id}} :: {{ item.name }}
                </span>
            </div>
        </div>
        
        <script>       
            var vm = new Vue({
                el : '#app',
                data : {
                    items: [{
                            id : 1,
                            name : 'a'
                        },
                        {
                            id : 2,
                            name : 'b'
                        },
                        {
                            id : 3,
                            name : 'c'
                        }
                    ]
                },
            });
 
            function comp(val1, val2){
                return val1.id < val2.id;
            }
            vm.items.sort(comp);
        </script>
    </body>
</html>
cs


items를 item으로 순회한다. 이때 vm.items.sort가 돌고 comp 함수로 정렬 조건을 주는데 id값을 순으로 내림차순하게된다.


이 정렬 과정은 cpp와 반대이다.


이렇게 정렬 후에 div에서 v-for로 items를 순회하게 된다.





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
// orderby를 이용한 출력
 
<!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">
            <ul>
                <li v-for = "entry in orderedUsers"> {{ entry.name }} </li>
            </ul>
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    users: [{
                        id : 1,
                        name : 'Vue',
                        last_login : new Date(2017, 11, 8, 23, 12, 11) 
                        
                    },{
                        id : 2,
                        name : 'JavaScript',
                        last_login: new Date(2017, 11, 6, 23 , 12, 11)
                    }]
                },
 
                computed:{
                    orderedUsers : function(){
                        return _.orderBy(this.users, 'name', 'desc'); // 오름차순 :: asc
                    }
                }
            });
 
        </script>
    </body>
</html>
cs


lodash js를 이용하여 _.orderBy 함수를 이용하면 오름차순 및 내림차순으로 정렬 할 수 있다. 


_.orderBy(a,b,c) a의 b 값을 c 기준으로 정렬한다.


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
 
 
// orderby 여러 정렬 속성, 정렬 조건 지정가능
<!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">
            <ul>
                <li v-for = "entry in orderedUsers"> {{ entry.name }} </li>
            </ul>
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    users: [{
                        id : 1,
                        name : 'Vue',
                        last_login : new Date(2017, 11, 8, 23, 12, 11) 
                        
                    },{
                        id : 2,
                        name : 'JavaScript',
                        last_login: new Date(2017, 11, 6, 23 , 12, 11)
                    }]
                },
 
                computed:{
                    orderedUsers : function(){
                        return _.orderBy(this.users, ['name', 'last_login'], ['desc', 'asc']); 
                    }
                }
            });
 
        </script>
    </body>
</html>
cs


이 코드에서 _.orderBy의 의미는 name은 내림차순, last_login은 오름차순으로 정렬하라는 의미이다.


여기서 computed는 미리 계산을 해둔다는 의미이다.


자바스크립트에서 onload라고 생각하면 쉽다.





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
 
// 스칼라 배열을 orderby를 이용하여 내림차순 정렬
 
<!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">
            <ul>
                <li v-for = "n in orderedUsers"> {{ n }} </li>
            </ul>
            <span v-for = "i in items"> {{ i }} </span>
        </div>
 
        <script>
            var app = new Vue({
                el : '#app',
                data:{
                    items : [3,6,1,4]
                },
                computed:{
                    orderedUsers: function(){
                        return _.orderBy(this.items, [], "desc");
                    }
                }
            })
        </script>
    </body>
</html>
cs


해당하는 스칼라 배열을 내림차순 정렬하기 위해 []라고 설정하면 된다.



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

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

[VueJS] computed, watch 속성  (0) 2018.07.22
[VueJS] v-if 디렉티브 및 v-show 디렉티브  (0) 2018.07.20
[VueJS] 필터를 이용한 문자열 응용  (0) 2018.07.16
[VueJS] 머스태시 문법 및 필터 적용  (0) 2018.07.14
[VueJS] 버스를 이용한 두 컴포넌트 통신  (0) 2018.07.12

티스토리툴바