데이터의 연산을 처리할 때 사용하는 Computed 사용 예시 입니다.
1. data에 fruits 배열에 Apple, Banana, Cherry를 담고 템플릿에 불러옵니다.
<template>
<section v-if="fruits.length > 0">
<h1>Fruit</h1>
<ul>
<li v-for="fruit in fruits" v-bind:key="fruit">{{ fruit }}</li>
</ul>
</section>
<section v-if="fruits.length > 0">
<h1>Reverse Fruit</h1>
<ul>
<li v-for="fruit in fruits" v-bind:key="fruit">{{ fruit.split('').reverse().join('') }}</li>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
fruits: ['Apple', 'Banana', 'Cherry'],
};
},
};
</script>
디렉티브 v-if로 배열 fruits의 요소가 있을 때만 v-for을 이용하여 data에 선언된 fruits배열에 담긴 요소들을 반복하고, v-bind로 key를 배열의 각 요소로 지정해줍니다.
Fruit
- Apple
- Banana
- Cherry
Reverse Fruit
- elppA
- ananaB
- yrrehC
2. fruits.length > 0, fruit.split('').reverse().join('') 부분을 computed에서 연산할 수 있도록 코드를 수정합니다.
<template>
<section v-if="hasFruit">
<h1>Fruit</h1>
<ul>
<li v-for="fruit in fruits" v-bind:key="fruit">{{ fruit }}</li>
</ul>
</section>
<section v-if="hasFruit">
<h1>Reverse Fruits</h1>
<ul>
<li v-for="fruit in reverseFruits" v-bind:key="fruit">{{ fruit }}</li>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
fruits: ['Apple', 'Banana', 'Cherry'],
};
},
computed: {
hasFruit() {
return this.fruits.length > 0;
},
reverseFruits() {
return this.fruits.map((fruit) => {
return fruit.split('').reverse().join('');
});
},
},
};
</script>
Fruit
- Apple
- Banana
- Cherry
Reverse Fruit
- elppA
- ananaB
- yrrehC
computed를 사용하면 hasFruit(), reverseFruits()와 같은 연산 함수를 만들어 템플릿에 적용할 수 있습니다.
이 처럼 computed를 이용하면 템플릿 내의 코드가 간단해지고 유지보수가 쉬워집니다.
참고 문서:
'Front-end > Vue' 카테고리의 다른 글
Vue.js) Getter, Setter (0) | 2024.07.24 |
---|---|
Vue.js) Computed 캐싱 (0) | 2024.07.24 |
Vue.js) 템플릿 문법 (0) | 2024.07.24 |
Vue.js)인스턴스와 라이프사이클 (6) | 2024.07.24 |
Vue.js 설치 (0) | 2024.07.23 |