Vue v-for

 

 

<template>
-----------------------------------------------------------------
<div class="menu">

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


<a v-for = "item in menus" :key="item" > {{item}} </a>


<a v-for = "(item,i)in menus" :key="i" > {{item}} </a>
  --> 이렇게 인덱스 값을 뺄수도 있음 = 인덱스 조건 부여 가능 원하는것만 나오게
  --> v-for 문법에는 object 나 array 가 들어감 in (object or array)
  -->
            


</div>
-----------------------------------------------------------------  
  
  
  <div>
    <p>{{ products[0] }}</p>
    <p>60만원</p>
  </div>

  <div>
    <p>{{ products[1] }}</p>
    <p>60만원</p>
  </div>

  <div>
    <p>{{ products[2] }}</p>
    <p>60만원</p>
  </div>
  
-----------------------------------------------------------------
실습 예
<div v-for = "(product, i) in products" :key="i">
    <p>{{ product }}</p>
    <p>{{price[i]}} 만원</p>
</div>

-----------------------------------------------------------------
</template>

a

<script>
export default {
  name: "App",

  data() {
    return {
-----------------------------------------------------------------
	product: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      menus: ["HOME", "Products", "Help,
      price : ["60"  , "50", "30"]
-----------------------------------------------------------------      	
    };
  },

  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;
  margin-top: 60px;
}

.menu{
  background-color: cadetblue;
  padding: 15px;
  border-radius:  5px;
}

.menu a{
  padding: 10px;
  color: aliceblue; 
}
</style>

<div class="menu">

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

<a v-for = "item in menus" :key="item" > {{item}} </a>

<a v-for = "(item,i)in menus" :key="i" > {{item}} </a>
  --> 이렇게 인덱스 값을 뺄수도 있음
  --> v-for 문법에는 object 나 array 가 들어감 in (object or array)
  --> 인덱스에 따라서 v-for 진행 
            
</div>

 

https://stellar-smile-1db.notion.site/My-Summary-a4c3dd044530418faffd5f7e0e3e3947

My Summary

2021/10/15 활용중에 안사실