[Vue.js] v-for를 통해 리스트 태그 작성하기 feat. 간단한 메뉴바

[Vue.js] 간단한 메뉴바를 통해 v-for 기능 알아보기

 

⭐️  v-for 용도?

Html 태그를 반복적으로 작성하거나

반복적인 태그를 작성하면서 동시에 배열 내 여러 값을

바인딩 해야하는 경우에 v-for를 사용하는데 (리스트 랜더링)

아래 예제 코드와 주석을 통해 알아보자

 

⭐️  샘플 예제

<template>
  <nav>
    <ul class="menu">
      <!--v-for를 통해 반복되는 html 코드 작성이 가능하다-->
      <!--주의할 점은 반복 대상이 되는 태그는 반드시 서로 다른 key값을 가져야함-->
      <li class="menu--item" v-for="menu in menus" :key="menu"><a>{{menu}}</a></li>
    </ul>
  </nav>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      menus : ['Home', 'Products', 'About', 'QnA']
    }
  }
}
</script>

<style>
  .menu {
    display : flex;
    background-color: steelblue; 
    border-radius: 5px;
    list-style: none;
    justify-content: space-around;
    padding : 10px;
  }

  .menu--item {
    padding : 10px;
  }

  .menu--item a {
    user-select: none;
    cursor: pointer;
    color : white;
  }
</style>

 

⭐️  결과 출력