조건부 렌더링

v-if

v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용

v-else

v-if가 거짓일때 렌더링

v-else-if

else if블록

<template v-if="">

여러개의 HTML 요소를 v-if 디렉티브로 연결하기 위해서 사용

v-show VS v-if

• v-if는 "실제(real)"로 렌더링됩니다. 전환 할 때 블록 내부의 컴포넌트들이 제거되고 다시 생성 => 런타임 시 조건이 변경되지 않을 때 사용
• v-show는 훨씬 간단합니다. 엘리먼트는 CSS 기반 전환으로 초기 조건과 관계 없이 항상 렌더링 => 무언가를 자주 전화해야 할때 사용

<template>
  <div>
    <h2 v-if="visible">Hello vue3!!</h2>
    <h2 v-else>false 입니다.</h2>
    <button v-on:click="visible = !visible">toggle</button>

    <h2 v-if="type === 'A'">A입니다.</h2>
    <h2 v-else-if="type === 'B'">B입니다.</h2>
    <h2 v-else-if="type === 'C'">C입니다.</h2>
    <h2 v-else>A,B,C가 아닙니다.</h2>

    <button v-on:click="type = 'A'">A</button>
    <button v-on:click="type = 'B'">B</button>
    <button v-on:click="type = 'C'">C</button>
    <button v-on:click="type = 'D'">D</button>

    <template v-if="visible">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <!-- display:none 처리 -->
    <h1 v-show="ok">Title입니다.</h1>
    <button v-on:click="ok = !ok">show toggle</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const visible = ref(true);
    const type = ref('A');
    const ok = ref(true);

    return {
      visible,
      type,
      ok,
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

목록 렌더링

v-for

v-for를 통해서 배열인 목록을 렌더링

• v-for=”item in items” 문법을 사용해서 배열에서 항목을 순차적으로 할당합니다.
• v-for=”(item, index) in items” 문법을 사용해서 배열 인덱스를 가져올 수 있습니다.
• 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야 합니다. (vue 2.2.0 부터 필수)
• 객체의 속성도 반복할 수 있다.

<template>
  <div>
    <ul>
      <!-- <template v-for=" (item,index) in items" :key="item.id">
         <li v-if="item.id % 2 === 0">
          인덱스 :{{index}} ,  {{item.message}}
        </li> 
      </template> -->
      <template v-for=" (item, index) in evenItems" :key="item.id">
        <li>
          인덱스 :{{ index }} , {{ item.message }}
        </li>
      </template>
    </ul>
    <ul>
      <li v-for="(value,key,index) in myObject">
        {{index}} , {{key}} , {{value}}
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive , computed} from 'vue'

export default {
  setup() {
    const items = reactive([
      { id: 1, message: "java" },
      { id: 2, message: "HTML" },
      { id: 3, message: "CSS" },
      { id: 4, message: "JS" },
    ]);

    const evenItems = computed(() =>  items.filter(item => item.id % 2 === 0));

    const myObject = reactive({
      title : '제목',
      author : '홍길동',
      publishedAt : '220726'
    });

    return { items, evenItems ,myObject}
  }
}
</script>

<style lang="scss" scoped>
</style>