인프런 커뮤니티 질문&답변
작성한 질문수
computed 를 이용한 class 변경관련
작성
·
573
5
안녕하세요. 강의를 보다가 궁금한 점이있어서 질문 남기게되었습니다.
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태그안에서 할수있는 방법이 없는지 질문드려요
답변 부탁드립니다.
답변 4
6
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 클래스로 설명이 간략하게 나와있긴 하네요.
5
감사합니다 광진님 먼저 보시고 답변 남겨주셨네요 :)
읍쓰님, 광진님이 말씀해주신대로 HTML 표준 속성과 Vue.js 디렉티브 속성을 함께 사용할 수 있습니다.
<p class="blue" v-bind:class="'red'">위 결과 값은 <p class="blue red">가 됩니다. 이처럼 문자열 대신에 뷰 데이터 속성을 연결해서 사용하시면 될 것 같아요 :)
1
0
너무 기본적인 질문일 수 있는데 computed 와 methods 의 차이는 무엇인가요? class="errorTextColor()"로 놓고 해도 동작은 하던데, 기능적으로 다른건가요?