<template>
  <div id="app">
    <button @click="handler">click</button>
  <h1>v-for 기본</h1>
  <ul>
    <li
      v-for="fruit in fruits"
      :key="fruit">
      {{fruit}}
    </li>
  </ul>
  <br>
  <h1>index 추가</h1>
  <ul>
    <li
      v-for="(fruit, index) in fruits"
      :key="fruit">
      {{fruit}}-{{index+1}}
    </li>
  </ul>
  <br>
  <h1>배열데이터 안에 객체 데이터 반복 출력하기</h1>
  <ul>
    <li
      v-for="(fruit, index) in newFriuts"
      :key="fruit.id">
      {{fruit.name}}-{{index+1}}
    </li>
  </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      fruits:['Apple','Banana','Cherry']
    }
  },
  computed:{
    newFriuts(){
      return this.fruits.map((fruit, index)=>{
        return {
          id: index,
          name: fruit
        }
      })
    }
  },
  methods:{
    handler(){
      this.fruits.push('Orange')
    }
  }
}
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.