[2021-09-02] 10 ~ 11강

1. directive  ;  v-if

- 이 directive v-if는 값의 true/false에 따라 div 태그 내용을 실행할지 말지 결정한다.

 

- 형태: <div(span) v-if="true / false / t,f값 갖는 속성">

                true이면 수행할 내용

         </div(span)>

 

- [v-else]를 사용하면 false일때 어떤 값을 수행할지도 결정할 수 있다.

<button @click="toggleShowBooks"> 
            <span v-if="showBooks">Hide Books</span>
            <span v-else>Show Books</span>
        </button>

 

---

2. directive ;  v-show

- 이 directive v-show는 값의 true/false에 따라 div 태그 내용을 보여줄지 말지 결정한다. ( like v-if )

 

- 형태 :  <div v-if="true / false / t,f값 갖는 속성">

                  true이면 보여줄 텍스트

            </div>

 

- [v-if] vs [v-show]

	v - if	v - show
false 일 때	해당 코드 자체를 DOM에서 지워버려서 수행 못하게 함 (true이면 다시 코드 주입) -> 잘 안변하는 애 다룰때	코드는 그대로 존재하는데 보여주는 것만 비활성화 (true이면 활성화) -> 빠르게 자주 변하는 애 다룰때