Jae Front-end Study

v-if

v-if 디렉티비는 조건부로 블록을 렌더링 하고, 블록은 디렉티브 표현식이 ture 일 때만 렌더링 된다.

v-else

v-if에 대한 else 블록을 렌더링 하고, 블록은 디렉티브 표현식이 false 일 때만 렌더링 된다.

결과 화면

• pages/index.vue

실제 프로젝트를 진행할 때에는 데이터(게시판, 공지사항 등)는 API로 받게 된다. 

데이터가 아무것도 없을 때에도 레이아웃을 보여주어야 하기 때문에 v-if와 v-else를 사용해 렌더링을 한다.

v-if 조건문에 맞춰 dataList 배열의 길이가 0이면 <h2> 태그를 렌더링 하고,

dataList 배열의 길이가 0이 아니라면 <ul> 태그를 렌더링 한다.

<template>
  <TheLayout>
    <h2 v-if="dataList.length === 0">데이터가 없습니다.</h2>

    <ul v-else>
      <li
        v-for="(list, key) in dataList"
        :key="`list-${key}`">
        <h2>{{ list.title }}</h2>
        <p>{{ list.content }}</p>
        <span>{{ list.date }}</span>
      </li>
    </ul>
  </TheLayout>
</template>

<script>
import TheLayout from "@/components/layout/TheLayout"

export default {
  name: 'Main',

  components: {
    TheLayout
  },

  data() {
    return {
      dataList: []
    }
  }
}
</script>

v-for

게시판의 게시글 리스트나 반복적인 내용을 보여줘야 할 때 v-for 디렉티브를 사용한다.

v-for="item in items" 와 :key 형태이다.

뷰에서 사용하는 for문이라고 생각하면 된다.

결과 화면

v-for 사용하기

• pages/index.vue

1. <script> 태그 안 data() 영역에 배열을 만든다. (dataList)
2. <li> 태그가 반복되어야 하기 때문에 <li> 태그에 v-for와 :key를 작성한다.
3. 중괄호 {{ ~ }} 안에 배열의 속성값을 작성한다.

<template>
  <TheLayout>
    <ul>
      <li
        v-for="(list, key) in dataList"
        :key="`list-${key}`">
        <h2>{{ list.title }}</h2>
        <p>{{ list.content }}</p>
        <span>{{ list.date }}</span>
      </li>
    </ul>
  </TheLayout>
</template>

<script>
import TheLayout from "@/components/layout/TheLayout"

export default {
  name: 'Main',

  components: {
    TheLayout
  },

  data() {
    return {
      dataList: [
        {
          title: 'Nuxt.js',
          content: 'Nuxt.js란, Vue.js 애플리케이션을 구축할 수 있는 오픈 소스 프레임워크이다.',
          date: '2023-10-01'
        },
        {
          title: 'Slot',
          content: '컴포넌트를 랜더링 할 때 html로 작성한 코드가 컴포넌트의 slot 부분으로 교체된다.',
          date: '2023-10-02'
        },
        {
          title: '뷰 SASS/SCSS 적용하기',
          content: 'sass/scss를 적용하고 싶은 .vue 파일에서 script 태그 아래에 style 태그를 작성한다.',
          date: '2023-10-03'
        }
      ]
    }
  }
}
</script>