스타일 클래스는 VueJS의 요소에 적용되지 않습니다.

Question

그래서 testvalue가 true이면 div에 .testcolor 클래스를 적용하고 testvalue가 false이면 아무것도 적용하지 않으려고 합니다.

getClass 메소드를 :class에 추가하면 호출되지도 않지만, {{ getClass }}에서 호출되면 호출됩니다. 캐시를 지우고 전체 코드를 다시 작성해 보았지만 여전히 작동하지 않습니다! 전체 코드는 다음과 같습니다:

으아악

Vue 인스턴스를 div 요소에 마운트하고 :class="testClass"(답변에서)를 h2에 추가하면 작동한다는 것을 알았습니다! 하지만 h2 요소에 설치하면 작동하지 않습니다!

Answer 1

귀하의 의견을 바탕으로 편집하세요 @martin0300

먼저 이 파티션을 ID가 test 인 다른 파티션으로 래핑해야 합니다. Vue는 컨테이너 요소(id가 있는 div test)를 애플리케이션의 일부로 간주하지 않으며 어떤 지시문도 처리하지 않습니다. 이에 대해 언급한 참고자료는 아래와 같습니다.

https://vuejs.org/guide/essentials/application .html#애플리케이션 설치

그러므로 마크업을 다음과 같이 변경하여 getClass 메서드의 값을 적용하세요...

으아아아

...또는 계산된 속성 방법을 사용하는 방법(아래 설명)

으아아아

--

원본 메시지:

getClass 当定义为方法时需要被调用，并且返回值（"testcolor"）被设置为 :class 的值。请注意函数调用 getClass() 代替您使用的 getClass.

으아아아

단, 이는 조건부로 수업을 적용하는 데 선호되는 방법은 아닙니다. 우리는 메서드보다 계산된 속성을 선호합니다. 렌더링할 때마다 메소드가 호출되는 반면, 계산된 속성은 기본 반응 데이터가 변경될 때만 다시 계산됩니다(이 경우 계산된 속성 testClass은 반응 속성 testvalue代码>.

에 따라 다름).

귀하의 경우 관용적 Vue 코드는 다음과 같습니다. 계산된 속성은 내부적으로 접근자 메서드/JS 프록시(:class="testClass" 和 NOT :class ="testClass()":class="testClass" 및 NOT

: class ="testClass())를 사용하여 구현되므로 함수처럼 호출되지 않습니다. "). 나는 메소드와 계산된 속성이 사용되는 방식의 차이가 혼란의 원인이라고 생각합니다. 🎜 으아아아