[Vue.js][Ch2][Vue 문법] Computed

템플릿 내에 표현식을 넣으면 편리하지만, 

복잡한 로직이라면 computed 속성을 사용해야 한다.

Computed

템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성

computed 속성을 사용해서 데이터를 원하는 방향으로 수정해서 사용

 

App.vue

<template>
  <fruits />
</template>

<script>
import Fruits from '~/components/Fruits'
export default {
  components: {
    Fruits
  }
}
</script>

Fruits.vue

<template>
  <section v-if="hasFruit">  <!-- computed 옵션에서 계산된 데이터인 hasFruit 사용 -->
    <h1>Fruits</h1>
    <ul>
      <li 
        v-for="fruit in fruits" 
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
  <section>
    <h1>Reverse Fruits</h1>
    <ul>
      <!-- computed 옵션에서 계산된 데이터인 reverseFruits 사용 -->
      <li 
        v-for="fruit in reverseFruits" 
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  /* computed : 계산된 데이터를 사용하는 옵션 */
  computed: {  
    hasFruit(){   // hasFruit라는 계산된 데이터
      return this.fruits.length > 0;    // true
    },
    reverseFruits() {   // reverseFruits라는 계산된 데이터
      return this.fruits.map(fruit => {
        // 'Apple' => ['A','p','p','l','e'] => ['e','l','p','p','A'] => 'elppA'
        return fruit.split('').reverse().join('');
      })
    }
  }
}
</script>

출력