조건부로 요소(element)나 뷰(View)를 렌더링한다.

요소의 존재를 바꾸는 것은 역시 쉽습니다 ! 다음으로 가서 버튼을 누르고 무슨일이 일어나는지 보세요. Vue 에서는 이벤트 핸들러로부터 메서드를 호출하는 것 뿐만 아니라 우리는 핸들러 안에서 직접적으로 인라인 단일 평가식도 실행할 수 있습니다.

이는 v-if 예시와 같은 것에 대하여 매우 편리합니다. 단순히 이벤트가 발동되면 호출되는 별도의 메서드를 작성하는 것 대신에 데이터 프로퍼티 인라인에서 블리언을 전환할 수 있습니다.

<view>
    <text v-if="seen">Now you see me</text>
    <button :on-press="seen = !seen>Click to Toggle</button>
</view>

조건부로 렌더링하는 v-if 디렉티브의 else 블록이다.

v-else 디렉티브는 v-if와 함께 사용하는 부가적인 디렉티브입니다. Javascript에서 if/else 조건문이 작동하는 것과 비슷하게, 이것은 요소를 Vue 인스턴스의 데이터 프로퍼티 값에 기반하여 렌더링 하는 else 요소 렌더링과 유사하게 작동합니다.

어떻게 v-else가 파라미터 입력을 가지고 있지 않은지 알고 있습니까? 이유는 v-else가 암시적으로 v-if 디렉티브 다음에 나오기 때문입니다. 그렇지 않으면 기본적으로 'v-if 디렉티브'가 에러가 발생합니다.

<view>
  <text v-if="seen">Now you see the first one.</text>
  <text v-else>Now you see the second one.</text>
  <button :on-press="seen = !seen>Click to Toggle</button>
</view>

<script>
export default() {
    data() {
        return {
            seen: false
        }
    }
}
</script>

# v-show
> 조건적으로 요소나 뷰를 보여줌
``v-if`` 디렉티브와 유사하게, ``v-show`` 는 유사한 방법으로 작동합니다.