Vue.js 시작하기 06 - 조건부 렌더링, v-if, v-if-else, v-show

- body -

<!-- //디렉티브 v-if and v-else-if and v-else -->
    <div id="app-1">
        <div v-else>
            <span>this block occurs error because direcive 'v-else' must be following direcive 'v-if' and this block is not</span>
        </div>
        <div v-if="boolVal1">
            <span>you can see me now</span>
        </div>
        <div v-else-if="boolVal2">
            <div>hello this is your 2nd msg</div>
        </div>
        <div v-else-if="boolVal3">
            <div>hello this is your 3rd msg</div>
        </div>
        <div v-else>
            <div>hello this is your 4th msg</div>
        </div>
        <div  v-if="boolVal4">
            <div>hello this is your 5th msg</div>
        </div>
    </div>
    <div>----------------------------------------------------<br></div> 

    <!-- //v-if 안에 넣을 수 있는 표현식 -->
    <div id="app-2">
        <div v-if="numVal1 == 6">
            hello this is your 1st msg<br>
            input: app2.numVal1 = 5;
        </div>
        <div v-if="numVal2*5 == 20">
            hello this is your 2nd msg<br>
            input: app2.numVal2 = 3;
        </div>
        <div v-if="textVal1 == 'hello'">
            hello this is your 3rd msg<br>
            input: app2.textVal1 = 'hello2';
        </div>
        <div v-if="textVal2.includes('rl')">
            hello this is your 4th msg<br>
            input: app2.textVal2 = 'orange';
        </div>
        <div v-if="textVal1.length > 9 || textVal2.includes('r')">
            hello this is your 5th msg<br>
            input: app2.textVal2 = 'some text';
        </div>
        <div v-if="getSomeBoolValByMethods()">
            hello this is your 6th msg<br>
            input: app2.numVal1 = 3;
        </div>
        <div v-if="getSomeBoolValByComputed">
            hello this is your 7th msg<br>
            input: app2.textVal2 = 'hey';
        </div>
    </div>
    <div>----------------------------------------------------<br></div> 

    <!-- // v-if 에서 랩퍼 역할을 하는 템플릿  -->
    <div id="app-3">
        <p>input: app3.trueOrFalse = false;</p>
        <template v-if="trueOrFalse">
            <p>
                I like {{ fruitItem.fname }}. 
            </p>
            <p>
                Because I like {{ fruitItem.color }},
            </p> 
            <p>
                and {{ fruitItem.fname }} is {{ fruitItem.color }}.
            </p>
        </template>
    </div>
    <div>----------------------------------------------------<br></div> 


    <!-- //사용자 입력값을 유지하는 v-if -->
    <div id="app-4">
        <div v-if="tf">
            <p>input some text in input tag and execute below line</p>
            <p>input: app4.tf = false;</p>
            <input type="text" placeholder="input num1">
        </div>
        <div v-else>
            <input type="text" placeholder="input num2">
        </div>
        <div v-if="boolVal">
            <input type="text" placeholder="input num3" key="username-input">
            <input type="text" placeholder="input num4" key="email-input">
        </div>
        <div v-else>
            <input type="text" placeholder="input num6" key="email-input">
            <input type="text" placeholder="input num5" key="username-input">
        </div>
    </div>
    <div>----------------------------------------------------<br></div> 

    <!-- // v-if와 v-show -->
    <div id="app-5">
        <p>input below commands and watch the elements </p>
        <p>input: app5.isRender = false; </p>
        <ul v-if="isRender">
            <li>It</li>
            <li>disappears</li>
            <li>from the elements</li>
        </ul>

        <p>input: app5.isDisplay = false; </p>
        <ol v-show="isDisplay">
            <li>This</li>
            <li>remains</li>
            <li>in elements</li>
        </ol>
    </div>
    <div>----------------------------------------------------<br></div>

 

- script - 

//디렉티브 v-if and v-else-if and v-else
        //v-else 디렉티브는 반드시 v-if 또는 v-else-if 디렉티브 뒤에 나와야 한다.
        //v-else 디렉티브가 순서를 지키지 않고 등장하면 에러가 발생한다.
        //v-if 디렉티브는 표현식의 결과값에 따라서 해당 요소를 표시할지 말지 결정한다.
        //v-if 디렉티브가 들어 있는 요소의 하위 요소들도 모두 함께 표시되거 표시되지 않거나 한다.
        //v-else-if 디렉트브가 결과값을 true로 갖더라도, 그보다 먼저 등장하는 v-if 또는 v-else-if 디렉티브 중에서 
        //결과값이 true인 요소가 있다면 그 뒤에 나오는 v-else-if 또는 v-else-if 디렉티브는 모두 비활성화된다.
        //v-else 디렉티브는 앞에 등장하는 모든 v-if 또는 v-else-if가 false일 경우에만 활성화된다.
        //앞에서 먼저 v-if 또는 v-else-if 디렉티브가 등장하더라도 뒤에서 v-if 디렉티브가 다시 등장한다면 v-if 순서는 초기화된다.

        const app1 = new Vue({
            el: '#app-1',
            data: {
                boolVal1: true,
                boolVal2: true,
                boolVal3: true,
                boolVal4: true,
            }
        });

        //v-if 안에 넣을 수 있는 표현식
        // 'a == b'  /=>  간단한 비교 연산자도 사용 가능하다.
        // ' a || b '  /=> and 나 or 같은 논리 연산자도 사용 가능하다.
        // a.length   /=> 객체나 요소의 속성값에 접근할 수 있다.
        // a.includes()  /=> 함수를 실행하고 그 결과로 boolean 값을 받아올 수 있다.
        // vue 객체 안에 정의해 두었던 methods 를 불러올 때는 끝에 ' () ' 붙여서 함수를 실행시킨 뒤에 그 결과값을 받아와야 한다.
        // vue 객체에 정의해 두었던 computed 값은 그 자체로 하나의 변수처럼 쓰이기 때문에 ' () ' 없이 바로 사용 가능하다.
        // 참조하고 있는 변수들의 값이 바뀌면 당연히 그 결과를 실시간으로 반영하여 활성화/비활성화 적용한다.
        const app2 = new Vue({
            el: '#app-2',
            data: {
                numVal1: 6,
                numVal2: 4,
                textVal1: 'hello',
                textVal2: 'world',
            },
            methods: {
                getSomeBoolValByMethods: function() {
                    return this.numVal1 > 4 ? true : false;
                }
            },
            computed: {
                getSomeBoolValByComputed: function() {
                    return this.textVal2.length > 4 ? true : false;
                }
            }
        });

        // v-if 에서 랩퍼 역할을 하는 템플릿 
        //template 태그가 일종의 랩퍼 역할을 해서, 템플릿 태그에 v-if를 쓰면 그 안에 있는 모든 요소들이 v-if의 결과값을 따라간다.
        const app3 = new Vue({
            el: 'div#app-3',
            data: {
                fruitItem: {fname: 'apple', color: 'red'},
                trueOrFalse: true
            }
        });

        // 사용자 입력값을 유지하는 v-if
        // v-if 나 v-else-if 나 v-else 등은 사용자 입력 값을 공유한다.
        // 무슨 뜻일까? v-if 값이 활성화되어서 그 안에 속하는 input 태그에 어떤 값을 입력했다.
        // 그 상태에서 v-if가 비활성화되고, v-else 가 활성화되면 input 태그 요소 자체는 바뀐다.
        // 하지만 전에 사용자가 입력했던 값은 그대로 유지된다.
        // 입력했던 값을 지우고 공백으로 만들면 placeholder가 나타나는데, placeholder 내용이 다르다.
        // placeholder 메세지가 다르다는 건 태그 자체는 따로 존재한다는 뜻이다.
        // 태그는 따로지만 값을 공유하면 어떤 좋은 점이 있을까?
        // 예를 들어서 loginType이 기업 고객인지, 일반 고객인지에 따라서 입력받는 태그를 따로 만들어 두었다.
        // 이때 v-if로 분기문을 만들었다면 입력했던 값은 그대로 가져갈 수 있게 된다.
        // 입력했던 값을 무조건 유지하는 게 꼭 좋은 것만은 아니다.
        // 다르게 가져가고 싶다면 태그에 key 속성을 넣어주면 된다.
        // key 속성에 같은 값을 가지고 있는 요소들끼리 묶어서 사용자 입력 값을 공유한다.
        const app4 = new Vue({
            el: 'div#app-4',
            data: {
                tf: true,
                boolVal: true
            }
        });

        // v-if와 v-show
        // v-show 는 v-if와 사용법이 거의 비슷하다.
        // 하지만 다른 점이 한 가지 있다.
        // false일 때 상태가 다르다.
        // v-if는 값이 false라면 해당 태그를 아예 렌더링하지 않는다. 요소 자체가 흔적도 없이 사라진다.
        // v-show는 값이 false라도 일단 렌더링을 한다. 단지 display 속성을 none으로 toggle 할 뿐이다.
        const app5 = new Vue({
            el: 'div#app-5',
            data: {
                isRender: true,
                isDisplay: true,
            }
        });

- 220526

 

 

참고자료:

https://kr.vuejs.org/v2/guide/conditional.html