코딩애플 Vue3 직방, 인스타그램 웹앱 --3 for문

Vue의 Html 반복문 = <태그 v-for="작명 in 몇회" :key="작명">   //key  꼭 필요함.

<template>
  <div class="menu">
    <a v-for="작명 in 3" :key="작명">Home</a>
    <a>Products</a>
    <a>About</a>
  </div>
  <img alt="Vue logo" src="./assets/logo.png">
<div>
  {{ logo }}
  <h4 class="red" style="color:blue;">XX 원룸</h4>
  <p> {{ price1}} 만원</p>
</div>
<div>
  <h4 :style="style">XX 원룸</h4>
  <p> {{ price2}} 만원</p>
</div>
</template>

 

이렇게 나옴....

이제 Home을 대체하는 배열을  이용할 것임.

Vue반복문은 array/object집어넣기 가능하며 데이터 갯수만큼 자동 반복됨.

<a v-for="menu in 메뉴들" :key="menu">{{ menu}}</a>
//export default의  data() {} 부분에 추가한것임
return{
      메뉴들:['Home', 'Shop','About'],

메뉴들에서 각각의 값을 menu로 뽑아내는 것이다. 그러므로 key는 꼭 ! 반드시 써야 한다.

작명부분에 2가지 변수를 사용할수 있다.

왼쪽 변수는 배열의 각 값을 의미하는 데이터 변수,

오른쪽 변수는 1씩 증가하는 정수

<a v-for="(menu,i) in 메뉴들" :key="menu">{{ i}}</a>

정수가 출력되었다.

변수를 ( ) 넣고 2개까지 넣을 수 있다.

 

for문 숙제...111 원룸과 월세를 반복문 처리하기.

<div>
  <h1>{{ logo }}</h1>
  // 가격도 돌아야 하는데 어떻게 하지? if문인가????
  <div>    // 처음에 내가 생각한 부분....
    <h4 :style="style" v-for="(room,a) in products" :key="room">{{ a+1}}. {{ room }}</h4>
    <p > {{ price2}} 만원</p>
  </div>

  <div v-for="(a,i) in 3" :key="i">  //알려주신 정답.. 상위버전 돌아가는 응용력 부족
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4>
    <p > {{ price[i] }} 만원</p>
  </div>  
</div>

3을 products로 변경하면된다....

원하는 값이 나옴.

export default {
  name: 'App',
  data(){
    return{
      메뉴들:['Home', 'Shop','About'],
      //데이터 보관함...object자료로 저장 key:value 형식     
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      price :[50,60,80],
    }
  },
  components: {

  }
}