computed 를 이용한 class 변경관련
698
3 asked
안녕하세요. 강의를 보다가 궁금한 점이있어서 질문 남기게되었습니다.
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 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">가 됩니다. 이처럼 문자열 대신에 뷰 데이터 속성을 연결해서 사용하시면 될 것 같아요 :)
0
너무 기본적인 질문일 수 있는데 computed 와 methods 의 차이는 무엇인가요? class="errorTextColor()"로 놓고 해도 동작은 하던데, 기능적으로 다른건가요?
개발자 툴에서 Vue가 표시되지 않는 현상.
0
93
2
chrome 확장 devtools 버전 문제
0
81
1
Vue.js not detected가 자꾸 뜹니다
0
83
2
마지막 강의가 안되요
0
57
1
data, computed, watch > Reactivity
0
51
1
f12누르고 개발자도구에 vue 탭이 안생겨요
0
89
1
vue composition api
0
73
1
강의 자료 다운이 될까요?
0
128
1
개발자 도구에서 뷰탭이 안보여요....
0
586
3
프롭스 데이터 질문입니다.
0
113
1
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11
0
140
1
화면이 안떠요,, 이전 이후 강의는 뜨는데..
0
236
6
크롬 확장 프로그램 vue devtools 설치했는데
0
532
2
코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.
0
243
1
버튼을 클릭해도 event가 발생하지 않습니다.
0
310
1
vue3 css 경로 표시 문의
1
231
2
개발자도구 vue탭
0
355
1
화면 코드 보기
1
226
2
App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ
1
384
2
html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.
1
886
2
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
1
288
2
뷰 개발자도구 이벤트 타임라인 어느 부분에서 확인가능한건가요
1
401
2
다음 단계 강의는...?
1
387
2
버튼을 눌러도 data의 값이 변경되지 않습니다
1
277
2