완벽하게 Vue.js
[Vue.js][Ch2][Vue 문법] Computed
써치킴
2022. 3. 1. 04:02
템플릿 내에 표현식을 넣으면 편리하지만,
복잡한 로직이라면 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>
출력