728x90
출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js
8. computed, watch 속성
공통점 : 둘다 함수 내부 변수가 변할 경우 메소드가 동작한다.
공식문서에 의하면 computed는 데이터 조작에 watch보다 특화되어 더 간결하게 작성할 수 있다.
무거운 내용은 watch에 구현
(1) watch 사용 : 복잡
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
(2) computed 사용 : 간단
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
- computed의 예제
> isError 데이터 값에 따른 텍스트 색상 변화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.warning{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <p v-bind:class="cname">Hello</p> -->
<!-- isError에 따라 warning 또는 빈값이 된다.-->
<!-- <p v-bind:class="{ warning: isError}">Hello</p> -->
<p v-bind:class="errorTextColor">Hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
//cname: 'blue-text',
isError: false
},
computed:{
errorTextColor: function(){
// if(isError){
// return 'warning'
// } else{
// return null;
// } 아래와 동일
return this.isError ? 'warning' : null;
}
}
})
</script>
</body>
</html>728x90
'Front-End > Vue' 카테고리의 다른 글
| [장기효(캡틴판교) - Vue.js 시작하기] 10. 간단한 로그인 폼 (0) | 2021.01.25 |
|---|---|
| [장기효(캡틴판교) - Vue.js 시작하기] 9. Vue CLI 설치 및 프로젝트 생성 (0) | 2021.01.25 |
| [장기효(캡틴판교) - Vue.js 시작하기] 7. 템플릿 문법 (0) | 2021.01.25 |
| [장기효(캡틴판교) - Vue.js 시작하기] 6. axios (0) | 2021.01.24 |
| [장기효(캡틴판교) - Vue.js 시작하기] 5. router (0) | 2021.01.24 |
댓글