computed 를 이용한 class 변경관련

Question

안녕하세요. 강의를 보다가 궁금한 점이있어서 질문 남기게되었습니다.  v-bind:class="errorTextColor" 로 warning 이라는 클래스를 주었는데 그럼 클래스가 두개일때는 어떻게 해야하나요?  <p class="text warning"> 이렇게 이미 text라는 class가 있고 warning만 넣었다가 뺐다가 하는 동작을 하고 싶은데  v-bind:class 안에 어떻게 넣어야할까요? errorTextColor : function() { return this.isError? 'text warning' : 'text'? 이런식으로 class를 넣는것은 확인했는데 이렇게 말고 html태그안에서 할수있는 방법이 없는지 질문드려요  답변 부탁드립니다.

이광진 · Answer

HTML 태그 내에 class 를 선언하면 static class로 v-bind:class 를 쓰더라도 변경이 안되는 걸로 알고 있습니다. 즉  <p class="text" v-bind:class="errorTextColor"> 로 쓰면 text는 그대로 남고 errorTextColor에 의한 클래스는 뒤에 추가가 될 것 입니다. https://kr.vuejs.org/v2/guide/class-and-style.html 공식 사이트 에서도 static 클래스로 설명이 간략하게 나와있긴 하네요.

캡틴판교 · Answer

감사합니다 광진님 먼저 보시고 답변 남겨주셨네요 :) 읍쓰님, 광진님이 말씀해주신대로 HTML 표준 속성과 Vue.js 디렉티브 속성을 함께 사용할 수 있습니다.

위 결과 값은

가 됩니다. 이처럼 문자열 대신에 뷰 데이터 속성을 연결해서 사용하시면 될 것 같아요 :)

읍쓰 · Answer

네 두분다 답변 감사합니다 :)

김성훈 · Answer

너무 기본적인 질문일 수 있는데 computed 와 methods 의 차이는 무엇인가요? class="errorTextColor()"로 놓고 해도 동작은 하던데, 기능적으로 다른건가요?