[vue]v-for

v-for

• 배열 출력

<template>
  <div>
    <h2>{{animals}}</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animals:["monkey","rat","dog","lion"]
    };
  }
}
</script>

<template>
  <div>
    <h2 v-for="animal in animals" :key="animal">{{animal}}</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animals:["monkey","rat","dog","lion"]
    };
  }
}
</script>

• v-bind:key를 지정해 주어야한다.

key값은 고유한 값이 어야하므로 고유한 값을 대입해 준다.

v-for의 두번째 인자 index

<template>
  <div>
    <h2 v-for="(animal, index) in animals" :key="index">{{index}}:{{animal}}</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animals:["monkey","rat","dog","lion"]
    };
  }
}
</script>

index는 고유값이므로 key에 대입시킬때 유용하다.