[Vue.js] 뷰 리스트 렌더링 하는 법, Vue.js List Rendering

 

 

 

 

---

 

뷰 리스트 렌더링

---

 

복잡한 웹을 만들다보면 정말 자주 마주치게 되는 상황이 있습니다. 게시판의 게시글 리스트를 보여줘야하는 상황처럼 목록이나 리스트와 같이 비슷한 내용을 반복적으로 보여줘야하는 경우가 그 예입니다. 이때 사용하는 디렉티브가 바로 v-for 디렉티브입니다.

 

Html 요소들 데이터 값을 받아 rendering 하려면 <scripts> 태그 안으로 data() 데이터 보건서를 만듭니다.

 

<scripts>
... 

data(){
  return {
   
    building : ['OneRoom', 'TwoRoom', 'ThreeRoom'],
    price : [100,200,300],

  }
 },
 
 <scripts>

 

• Html div 태그로 건물 데이터 실시간 렌더링
• 특징 {{ data }}

 

<div>
    <h4>{{building[0]}}</h4>
    <p>{{price[0]}}</p>
 </div>
 <div>
    <h4>{{building[1]}}</h4>
    <p>{{price[1]}}</p>
 </div>
 <div>
    <h4>{{building[2]}}</h4>
    <p>{{price[2]}}</p>
  </div>

 

 

---

 

 

 

 

Vue.js v-for 문법

---

 

VueJs v-for 문법을 사용해 다양한 데이터들 반복문으로 출력하기

 

v-for 디렉티브를 사용하여 배열을 리스트 렌더링 할 수 있습니다. v-for 디렉티브에 a in buildings 형태의 문법을 넘겨줘야 합니다.a는 원본 데이터 배열이고 buildings은 반복되는 배열의 요소입니다.

 

key는 Vue의 각각의 노드에 고유한 ID를 지정해 줄 때 사용됩니다. v-for 뿐만 아니라 이전 포스트에서 이야기한 v-if를 사용할 때도 key가 사용됩니다.

• data() 부분으로 buildings[], price[] 데이터 저장

<div v-for= "(a,i) in buildings" :key="a" >
  <h4>{{ buildings[i]}}</h4> 
  <p> {{ prices[i] }} </p>
</div>

 

 

 

---

 

 

VueJs v-for 사용해 dropdown 메뉴 만들기

---

• 우선 data() 보건서로 dropdown : [ ‘ Home’, ‘ About’,‘ Contact’,‘ Login’ ], 데어터 저장해 이 데이터 사용해서 반복문으로 UI 구성

Target: 다음 간단한 코드를 반복으로 Vue Rendering 사용

 <div>
    <a> Home </a>
    <a> About</a>
    <a> Contact</a>
    <a> Login </a>
 </div>

 

 

Action: v-for 문법 사용 + Tailwind CSS

<div class=" bg-green-700 p-8 rounded-m ">
    <a 
     v-for="(a,i) in menu" :key="a"
     class="font-bold p-5 text-white"> {{menu[i]}} </a>
  </div>

 

결과

 

 

 

---