[Vue] 데이터 조건부 처리 (If-Else, Show)

지난 시간에는 Array 데이터를 처리하는 방법을 배웠다

https://co-de.tistory.com/129

[Vue] v-for 를 이용한 Array 데이터 처리

이번 시간에는 데이터가 조건에 일치, 불일치 할 때 원하는 처리를 하는 실습을 하도록 한다!

IfElseShow.vue

<template>
    <div v-if="true">True</div>
    <div v-else>False</div>
    <div v-show="1 > 0">True</div>
    <div v-show="false">False</div>
    <div>
        <ul v-for="(item, idx) in results" :key="idx">
            <li v-show="item.displayYn">{{item.text}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "IfElseShow",
        data(){
            return {
                results : [
                    {
                        text: "A",
                        displayYn: true
                    },
                    {
                        text: "B",
                        displayYn: false
                    },
                    {
                        text: "C",
                        displayYn: true
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

하나씩 보도록 하자

우선 v-if 조건에 맞을시 출력하도록 하며

조건에 안맞을시 v-else 를 타도록 한다.

<div v-if="true">True</div>
<div v-else>False</div>

해당 처리에 대한 출력은 True 문구가 출력된다.

v-show 의 경우에도 마찬가지로 조건에 맞을시 해당 태그가 사용되어 True 가 화면에 출력될 것이다.

<div v-show="1 > 0">True</div>
<div v-show="false">False</div>

v-if 와 show 의 차이는 조건에 안맞을시 if 는 아예 태그가 사용되지 않으며

v-show 의 경우 조건에 안맞을시 태그가 사용되나 display:none 으로 보여지지 않는것이다.

v-show 조건 불일치 일시 아래와 같이 태그가 사용되며 화면에 출력되지 않으며

만약 스크립트를 통해 계속적으로 노출/비노출 처리를 한다면 show 를 사용하는것이 낫다.(태그를 추가/제거하는 반복 작업을 하는것 보다 속성값을 변경하여 처리하는것이 브라우저의 부담이 적다고 한다.)

<div style="display: none;">False</div>

간단하게 data 함수를 이용하여 results 라는 array 형태의 데이터를 만들었으며

displayYn 값에 따라 true면 화면에 표기 되도록 한다.

이제 부모 컴포넌트인 App.vue 에서 해당 컴포넌트를 불러온다.

<template>
  ...
  <IfElseShow/>
</template>

<script>
  ...
  import IfElseShow from "@/components/IfElseShow";

export default {
  name: "app",
  components: {
   ...
    IfElseShow
  },
  data(){
    return {
      ...
    }
  }
}
</script>

<style>
  ...
</style>

실행시 화면은 아래와 같다.