computed
- 참조하고 있는 값이 변경될때마다 정의된 계산식에 따라 값을 출력한다.
- 정의된 계산식에 따라 결과값을 반환할때 사용한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="todos">
<div v-for="todo in computedTodos" :key="todo.id">
<input type="checkbox" v-model="todo.done">
<span>{{ todo.title }}</span>
</div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
todos: [
{
title: '아침먹기'
},
{
title: '점심먹기'
},
{
title: '저녁먹기'
}
]
},
computed: {
computedTodos() {
return this.todos.map((todo, index) => {
// return Object.assign({}, todo, {
// id: index + 1,
// done: false
// })
return {
...todo,
id: index + 1,
done: false
}
})
}
}
})
</script>
</body>
</html>- console
vm.todos.push({id: 4, done: false, title:'야식먹기'})
- 야식먹기 추가
computed Getter, Setter /
watch
- 지정한 대상의 값이 변경될때마다 정의한 함수가 실행되는 것.
<body>
<div id="app">
<div>{{ msg }}</div>
<div>{{ reversedMsg }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!'
},
computed: {
reversedMsg: {
// Getter
get() {
return this.msg.split('').reverse().join('')
},
// Setter
set(v) {
this.msg = v
}
}
},
watch: {
msg(newMsg) {
console.log('New msg : ' + newMsg)
},
reversedMsg(newMsg) {
console.log('New reversedMsg : ' + newMsg)
}
}
})
</script>
</body>
- reversedMsg 변경될때 값 받아오는 get(), set() 작성
🐢 💨 💨