v-bind: Vue.js의 동적 값에 대한 스타일

Question

동적 값을 사용하기 위해 v-bind:style을 사용할 때 v-bind:style이 작동하지 않는 문제에 직면했지만 v-bind:style이 올바른 값을 얻었음을 확신합니다(:style='{콘솔에서) 색상 : 빨간색(다른 값) }') 및 스타일 섹션의 CSS가 성공적으로 반영됩니다. v-bind를 사용하지 않는 이유는 무엇입니까? 어떤 아이디어가 있나요? ? 매우 감사합니다.

으아아아 으으으으

Answer 1

다음 코드 조각을 확인하세요. 모든 것이 괜찮아 보입니다.

으아아아 으아아아

Answer 2

위에서 언급했듯이 스타일에는 compulated 속성을 사용해야 합니다.
이는 또한 Prop에 대한 모든 변경 사항을 자동으로 반영합니다.
특정 조건이 있는 경우 콜백 함수에서 계산된 값을 기반으로 값을 수정할 수도 있습니다. 이 접근 방식을 설명하기 위해 다크 모드 예제를 추가했습니다.

으아악

그런 다음 :style="style"를 사용하여 div에 추가하세요.

으아악

내 조언. 관찰자를 사용하는 대신 색상 설정 코드를 아웃소싱하고 해당 메서드를 색상을 변경하는 이벤트에 바인딩합니다. 이렇게 하면 애플리케이션을 더욱 유연하게 만들고 정리할 수 있습니다. 하지만 당신이 하는 일도 효과가 있습니다.