computed

computed: 선언한 데이터를 가공, 계산하여 다시 반환해주는 옵션

 

테스트 코드

componet 생성

<template>
  <section>
    <h1 v-if="hasFruit">
      Fruits
    </h1>
    <ul>
      <!-- v-for 디렉티브를 이용해서 fruits 배열의 아이템을 fruit라는 값으로 가져와서 반복적으로 출력 -->
      <li
        v-for="fruit in fruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
  <section>
    <h1>Reverse Fruits</h1>
    <ul>
      <!-- 계산된 데이터를 반환하여 반복 출력 -->
      <li
        v-for="fruit in reverseFruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data () {
    return {
      // 배열 데이터 생성
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ],
    }
  },
  // 정의된 데이터를 계산 작업을 하여 반환해주는 옵션
  computed: {
    hasFruit() {
      // fruits 배열 데이터에 값이 있는 확인
      return this.fruits.length > 0
    },
    reverseFruits() {
      return this.fruits.map(fruit => {
        // 'Apple' => ['A, 'p', 'p', 'l', 'e']
        // => ['e', 'l', 'p', 'p', 'A'] => 'elppA'
        return fruit.split('').reverse().join('')
      })
    }
  }
}
</script>

 

브라우저에 출력해줄 vue 파일 생성

<template>
  <!-- 가져온 component를 출력 -->
  <Fruits />
</template>

<script>
// vue 파일 가져오기
import Fruits from '~/components/Fruits'
export default {
  // 가져온 component를 연결
  components: {
    Fruits
    
  }
}
</script>

 

확인