리스트 렌더링

배열을 리스트로 렌더링할 수 있습니다
현재 아이템의 인덱스를 가리키는 별칭도 지원합니다.

객체에 v-for 사용하기
v-for를 객체의 속성을 반복하는 데 사용할 수 있습니다.

const myObject = reactive({
  title: 'Vue에서 목록을 작성하는 방법',
  author: '홍길동',
  publishedAt: '2016-04-10'
})

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

<template>
  <button @click="handler">
    CLick me!
  </button>
  <ul>
    <li 
      v-for = "{id, name} in newFruits" :key="id"> 
      //computed된 객체 데이터를 사용합니다
      //인덱스를 지원합니다. key로 고유데이터를 구분합니다.
      
        {{ name }} - {{ id }}
        
      //name에 과일, id에 고유번호가 들어갑니다.
    </li>
  </ul>

</template>

<script>
import shortid from 'shortid' //id를 만들어주는 외부 라이브러리 입니다.

export default{
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry'] //`배열`데이터 입니다.
    }
  },
  computed: {
    newFruits() { //배열데이터를 computed 에서 `객체` 데이터로 바꿉니다.
      return this.fruits.map(fruit => ({
        id: shortid.generate(),
        name : fruit
      }))
    }
  },

  methods: {
   handler() { //배열에 오랜지를 넣습니다.
      this.fruits.push('Orange')
    }
  }
}
</script>

배열 변경 감지
수정 메서드
Vue는 반응형 배열의 변경 메소드가 호출 되는것을 감지하여, 필요한 업데이트를 발생시킵니다. 지원하는 변경 메소드 목록든 다음과 같습니다:

push() pop() shift() unshift() splice() sort() reverse()