<fragment> 태그

Vue.에서 <fragment> 태그는 부모 래퍼(wrapper)없이 여러 요소를 렌더링 하는데 사용된다.

 

DOM에 추가적인 래퍼 요소를 도입하지 않고도 요소 목록을 렌더링 할수있다.

 

컴포넌트 내에서 요소 목록을 렌더링 해야하지만 CSS나 레이아웃에 영향을 주는 추가적인 래퍼 요소를 추가하고 싶지 않을때 사용한다.

<template>
  <div>
    <h1>항목 목록</h1>
    <fragment>
      <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    </fragment>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['항목 1', '항목 2', '항목 3']
    };
  }
};
</script>