리액트보다 100배 쉬운 Vue 반복문 v-for

 

<template>

  <div class="menu">

   

    <a v-for="작명 in 메뉴들" :key="작명" >{{ 작명 }}</a>    

    <a v-for="작명 in 3" :key="작명" >{{ 작명 }}</a>    

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

 

</template>

<script>

export default {

  name: 'App',

  data(){ //여기가 데이터 보관함

    return {

      메뉴들 : ['Home','Shop','About'],

      products : ['역삼동원룸','천호동원룸','마포구원룸'],

      products2 : [50,'가격은아무거나'],

    }

  },

  components: {

  }

}

</script>

 

<a v-for="작명 in 메뉴들" :key="작명" >{{ 작명 }}</a>    

:key=""의 용도

반복문쓸때 꼭 써야함

반복문 돌린 요소를 컴퓨터가 구분하기 위해서 쓴다

 

 

 

Vue반복문 특징

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

변수 작명 2개까지 가능

왼쪽변수는 array내의 데이터

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

 

오늘의 숙제

 

 

 

숙제

<template>

  <div class="menu">

    <a v-for="작명 in 메뉴들" :key="작명" >{{ 작명 }}</a>    

    <a v-for="작명 in 3" :key="작명" >{{ 작명 }}</a>    

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

  </div>

  <div v-for="(i,v) in products" :key="i">

    <h4>{{i}}</h4>

    <p>{{products2[v]}} 만원</p> <!--데이터 보관함에 자료 이름으로 불러온다 {price1 : 60}-->

  </div>

</template>

<script>

export default {

  name: 'App',

  data(){ //여기가 데이터 보관함

    return {

      메뉴들 : ['Home','Shop','About'],

      products : ['역삼동원룸','천호동원룸','마포구원룸'],

      products2 : [50,'가격은아무거나',100],

    }

  },

  components: {

  }

}

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

.menu{

  background : darkslateblue;

  padding: 15px;

  border-radius : 5px;

}

.menu a{

  color: white;

  padding: 10px;  

}

</style>

결과