반응형




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>
        <div id = "app">
            <div v-for = "n in id">
                    <span v-if = "n != 5 && n % 2"> {{ n }}은 값이 홀수</span>
                    <span v-else-if = "n != 5 && !(n % 2)"> {{ n }}은 값이 짝수</span>
                    <span v-else> {{n}}은 중간값 </span>
            </div>
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data :{
                    id : [2,3,4,5,6,7,8]
                }
            });
        </script>
    </body>
</html>
cs


v-if, v-else-if, v-else를 이용하여 if, else if, else를 나타 낼 수 있다.



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
<!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">
            <div v-for = "n in id">
                <div v-if = "n != 5 && n % 2">
                    <span> {{ n }} 은 값이 홀수 </span>
                </div>
                
                <template v-else-if = "n != 5 && !(n % 2)"> 
                    <span>
                        {{ n }} 은 값이 짝수
                    </span>
                </template>
 
                <span v-else> {{n}}은 중간값 </span>
            </div>
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data :{
                    id : [2,3,4,5,6,7,8]
                }
            });
        </script>
    </body>
</html>
cs


template 태그를 이용하면 불필요한 div 태그 같은 것들을 피할 수 있다.


즉, 위의 내용에서 template는 단순 조건을 판별하는 것에만 이용되고 결국 남는건 span 태그 뿐이다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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">
            <span v-show = "useLocation == true"> Korea </span>
        </div>
 
        <script>
            var app = new Vue({
                el : '#app',
                data:{
                    useLocation : true
                }
            })
        </script>
    </body>
</html>
cs


v-show 디렉티를 이용하여 화면에 표시할지 결정

이때 v-if 디렉티브는 조건이 참일때만 dom에 추가되고 v-show 디렉티브는 조건이 거짓이어도 dom에 추가된다.

이런 내용을 고려해볼 때 dom에 강제로 추가할 이유가 없다면 v-if로 모든게 해결이 가능하다.


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

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

[VueJS] vue에서의 css 관리(v-bind)  (0) 2018.07.24
[VueJS] computed, watch 속성  (0) 2018.07.22
[VueJS] v-for 디렉티브 및 정렬 방법  (0) 2018.07.18
[VueJS] 필터를 이용한 문자열 응용  (0) 2018.07.16
[VueJS] 머스태시 문법 및 필터 적용  (0) 2018.07.14

티스토리툴바