보안 전공생의 공부

디렉티브 | v-if, v-for : 조건 렌더링 본문

WEB/Vue

디렉티브 | v-if, v-for : 조건 렌더링

수잉 2021. 1. 18. 10:47

◆ 디렉티브(directive) : html 엘리먼트의 특별한 속성 형태

v- 접두사 형태로 사용 !

​

◆ v-if

​

형태는ⅰ) v-if

ⅱ) v-if … v-else-if … v-else ⅲ) v-if … v-else

과 같다.

​

button을 클릭함에 따라, 에러 여부가 바뀌는 코드를 작성하였다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border : 4px solid teal;
            background : yello;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>>에러처리<</h3>
        <p v-if="error">에러발생 : 용량이 부족하여 다운로드 할 수 없습니다.</p>
        <button v-on:click="error=!error">다운로드</button>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                error : false
            }
        })
    </script>
</body>
</html>

div태그 안에 button 엘리먼트를 살펴보자.

<button v-on:click="error=!error">다운로드</button>

button 엘리먼트의 v-on 디렉티브 부분에서 error =! error 는

error의 현재값을 반대로 변환시켜준다(true→false, false→true)

​

현재 data객체의 error는 false로 설정되어있으니,

button을 누르면 true로 값이 변하고

이에 따라 아래 v-if문이 실행된다.

<p v-if="error">에러발생 : 용량이 부족하여 다운로드 할 수 없습니다.</p>

​

페이지를 들어가보면 이렇게 다운로드 button이 있다.

아까 코드에서 error을 false로 값을 지정하였다.

​

다운로드 button을 클릭해보면

이렇게 에러가 발생했다는 문구가 뜬다.

data 객체의 error 값도 false에서 true로 바뀌었다.

​

​

v-if … v-else-if … v-else 구문을 사용해보기 위해

위의 코드에서 p태그에 추가하였다.

 

<p v-if="error">에러발생 : 용량이 부족하여 다운로드 할 수 없습니다.</p>
<p v-else-if="appear"><img src="images.jpeg"></p>
<p v-else>다운로드가 진행되고 있습니다.</p>

그리고 data 객체에 appear 값을 true로 설정해두었다.

appear가 참이면 이미지가 로드된다.

 

        new Vue({
            el:'#app',
            data:{
                error : false,
                appear : true
            }
        })

img src 로 사진을 넣는 방법은

이 html이 들어있는 폴더에 사진을 저장하고나서 그 경로를 적으면 된다.

index.html을 기준으로 images.jpeg는 별 다른 부속폴더로 들어가지 않으므로 바로 "image.jpeg"라고 입력하였다.

​

이러한 경로에 대해서는 아래 블로그에서 자세히 설명해주고 있당

 

[HTML 기초정리]03.이미지 삽입, 상대경로/절대경로

[HTML 기초정리] 03.이미지 삽입, 상대경로/절대경로 1.이미지삽입 : HTML ▶ 공간O,1개 2.배경이...

m.blog.naver.com

페이지를 들어가보면,

error 값이 false여서 v-if 표현식이 거짓이고,

v-else if문으로 넘어가는데 appear값이 true이므로 DOM에 두번째 p태그가 추가되어 나타나고 있다.

​

button을 클릭하면 error값이 true가 되면서

v-if 표현식이 참이된다.

따라서 DOM에 첫번째 p태그가 추가된다.

※ 주의할점

v-if … v-else-if … v-else 구문 → 연속해서 사용 !

위의 p태그들 중간에 v-if 디렉티브와 관련 없는 p태그 추가되면 error 가 발생한다.

 

<p v-if="error">에러발생 : 용량이 부족하여 다운로드 할 수 없습니다.</p>
<p>안뇽</p>
<p v-else-if="appear"><img src="images.jpeg"></p>
<p v-else>다운로드가 진행되고 있습니다.</p>

이렇게 console에 error창이 뜬다.

​

​

​

◆ v-show

​

v-show는 조건문이 false이면 DOM에 존재하지만 페이지에 나타나지 않는다.

다시말해 DOM에 그대로 있고, 페이지에서 보이기, 감추기 형태로 동작한다는 것이다.

cf) v-if는 조건문이 false이면 DOM에도 나타나지 않았다

​

​

위에서 v-if … v-else-if … v-else 구문을 이용해

사진과 다운로드 버튼이 페이지에 나타나고,

다운로드 버튼을 누르면, error메시지가 뜨고 사진이 사라지게 하였다.

구현하고자 하는 바는 맞지만 이를 저 구문을 이용하는 건 아닌 것 같다.

​

버튼을 클릭했을 때, error값이 false면 사진이 나타나고

error값이 true이면 사진 다운로드가 불가하다는 메시지(<-코드에 아직 작성못함 ㅜ)와 함께 사진이 페이지에서 나타나지 않게 하고 싶다.

​

위에 작성한 코드를 수정하여 작성하였다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app>div{
            border : 4px solid teal;
            background : yellow;
            padding : 4px;
            margin-bottom : 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>이미지 다운로드 하기</h3>
        <div v-if="error">에러발생 : 용량이 부족하여 다운로드 할 수 없습니다.</div>
        <div v-show="appear">
            <img src="images.jpeg">
        </div>
        <button v-on:click="errorToggle">다운로드</button>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                error : true,
                appear : false
            },
            method:{
                errorToggle: function(){
                    this.error=!this.error;
                    if(this.error == false){
                        this.appear = true;
                    }else{
                        this.appear = false;
                    }
                }
            }
        })
    </script>
</body>
</html>

errorToggle 메소드를 만들어서

조건문을 통해 이미지가 페이지에 나타나거나 나타나지 않는 것을 작성하였다.

​

그리고 v-on:click="errorToggle" 을 작성해

버튼을 클릭했을때 errorToggle 메소드가 실행되게 하였다.

​

그런데 페이지로 들어가서 확인해보니 에러가 발생한다.

버튼을 누르면 errorToggle 메소드가 실행되어

error값이 true에서 false로 바뀌고 조건문에 따라 appear값이 true가 되면서

사진이 페이지상에 나타나야한다.

console에 error가 뜬다 ㅜㅜ

첫번째 경고창에서

"errorToggle" is not defined on instance but referenced during render" 이라는 말을 보니,

data객체에 errorToggle을 정의해주어야 되는 거 같긴한데...

여러가지 시도를 해보는데 저 error를 아직두 해결하지 못했다..ㅜㅜ

​

​

요즘 이렇게 vue를 공부하는 게 맞나 의문이 든다.

그냥 책에 나와있는 여러 개념을 예제로 공부하긴 하는데

예제를 따라하기만 하면

결국 책을 다 공부한다해도

나한테 남아있는 게 있을까 싶다..

예제대로 해도 error 뜨는 경우도 많고 말이다..

'WEB > Vue' 카테고리의 다른 글

디렉터리 | 이벤트 처리 : v-on  (0) 2021.01.27
디렉티브 | v-for, v-bind, v-model  (0) 2021.01.18
프로퍼티(2)  (0) 2021.01.18
vue.js 설치, 프로젝트 생성 및 구동, 종료  (0) 2021.01.18
화살표 함수 | 뷰 인스턴스 | 프로퍼티(1)  (0) 2021.01.18
'WEB/Vue' Related Articles more
Comments