[Vue] 조건문

v-if

- 조건에 따라 HTML을 표시하고 싶거나 지우고 싶을 때 사용하는 디렉티브

- 표시/비표시를 바꾸기만 할지 표시내용을 변경할지에 따라 사용하는 방법이 다르다.

-  <태그명 v-if="조건1">조건이1 true일때 표시</태그명>

-  <태그명 v-else-if="조건2">조건1이 false고 조건2가 true일때 표시</태그명>

- <태그명 v-else>어느 조건에도 해당되지 않으면 표시</태그명>

<div id="app">
    <h2>v-if/v-else 사용 예제</h2>
    <label><input type="checkbox" v-model="myVisible" />표시</label>
    <p v-if="myVisible">체크박스 ON</p>
    <p v-else>체크박스 OFF</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
        	myVisible: false,
        },
    });
</script>

---

v-show

- true/false값을 사용하여 HTML태그를 보이지 않게할 수 있다.

- v-if는 false일 경우 HTML태그를 삭제하는것에 반해 v-show는 false일경우 CSS style display속성을 none으로하여 HTML태그는 존재하되 사용자에게 보이지 않도록하는것이다.

- true/false값이 변경되면 v-if는 표시할 때마다 값을 새로 만들고, v-show는 이미 만들어진값을 보이거나 보이지 않게한다는 점이 차이점이다.

- v-show는 v-else로 동작하지 않으므로 false의 경우 다른것을 표시하는것은 불가능하다.