이번시간에는 Vue computed사용법을 익혀보도록 하겠습니다. 코드부터 살펴보면,
<body>
<div id="root">
<h1>{{message}}</h1>
<h2>{{reversedMessage}}</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
var app = new Vue({
el: '#root',
data: {
message: 'Hello World'
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
Vue data부분에 message값을 'Hello World'로 주었습니다. 이 값은 {{message}}로 받을 수 있죠. computed부분에서는 message를 역순으로 변환하는 함수를 넣어줍니다. 즉, Hello World는 dlroW olleH가 되겠죠. computed에서 지정한 함수 이름값은 {{message}}처럼 {{reversedMessage}}이런식으로 받아올 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root">
<h1>All Tasks</h1>
<ul>
<li v-for="task in tasks" v-text="task.description"></li>
</ul>
<h1>Completed Tasks</h1>
<ul>
<li v-for="task in tasks" v-if="task.completed" v-text="task.description"></li>
</ul>
<h1>Incompleted Tasks</h1>
<ul>
<li v-for="task in tasks" v-if="!task.completed" v-text="task.description"></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
var app = new Vue({
el: '#root',
data: {
tasks: [{
description: 'Go to the store',
completed: true
},
{
description: 'Finish srceencase',
completed: false
}, {
description: 'Make donation',
completed: false
}, {
description: 'Clear inbox',
completed: false
},
]
},
computed: {}
})
</script>
</body>
</html>
위에 작성된 코드는, 몇가지 할 일을 만들고 그 일들이 completed인지 아닌지 리스팅 해주는 코드입니다.
뭐 결과는 대충 이렇습니다. 지금은 리스팅을 공부하는 시간이 아니니 코드에 대한 설명은 넘어가겠습니다. 코드 이해가 안되시는 분들은 앞에 포스팅된 Lists를 확인 해보시면 도움이 됩니다.
자, 그럼 이제 computed를 사용하여 보도록 합시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root">
<h1>All Tasks</h1>
<ul>
<li v-for="task in tasks" v-text="task.description"></li>
</ul>
<h1>Completed Tasks</h1>
<ul>
<li v-for="task in tasks" v-if="task.completed" v-text="task.description"></li>
</ul>
<h1>Incompleted Tasks</h1>
<ul>
<li v-for="task in incompleteTasks" v-text="task.description"></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
var app = new Vue({
el: '#root',
data: {
tasks: [{
description: 'Go to the store',
completed: true
},
{
description: 'Finish srceencase',
completed: false
}, {
description: 'Make donation',
completed: false
}, {
description: 'Clear inbox',
completed: false
},
]
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
// this.tasks.filter(function (task) {
// return !task.completed;
// })
}
}
})
</script>
</body>
</html>
Vue computed 부분에 incompleteTasks라는 함수를 추가하였습니다. ECMA6이 익숙하지 않으신 분들은 아래 주석 처리된 코드를 보시면 됩니다. 표기만 다를뿐 같은 결과값을 반환하는 코드 입니다. 그럼 incompleteTasks 함수를 어떻게 사용하였는지 살펴보겠습니다. List하였던 부분으로 돌아가보면,
<h1>Incompleted Tasks</h1>
<ul>
<li v-for="task in incompleteTasks" v-text="task.description"></li>
</ul>
Incompleted부분에는 v-if가 빠진 대신에 v-for 부분이 "task in incompleteTasks"로 변화한 것을 볼 수 있습니다. computed부분에서 우리는 imcompletedTasks 함수를 !task.completed로 정의하였으므로. incompleteTasks의 값들이 리스팅 되어짐을 확인할 수 있습니다.
