<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="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() {
return this.isError ? 'warning' : null;
}
}
})
</script>
</body>
</html>사전적 의미 computed : 계산
컴퓨티드(computed) 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다.
예시
<div>{{ message.split('').reverse().join('') }}</div>위 코드는 데이터 속성의 문자열을 역으로 변환해주는 코드 reverse를 사용한 코드입니다.
이 처럼 콧수염 괄호 안에는 단순하게 데이터 속성의 값만 표시하는것이 아닌 자바스크립트의 내장 api를 활용하여 어느 정도 가공할 수 도 있습니다.
이와 같은 계산식이 템플릿에 많아지만 템플릿의 가독성은 현저하게 떨어지게 되죠 그렇기에 아래와 같이 computed를 사용할 수 있습니다.
computed: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}만약 이처럼 스크립트 부분에 적어준다면
<div>{{ reverseMessage }}</div>이 처럼 더욱 간결하게 나타나게할 수 있겠죠
디자이너, 기획자 출신의 개발자