메소드를 사용하여 Vue.js에 조건부 스타일을 추가하는 방법은 무엇입니까?

Question

상위 컴포넌트에서 전달된 prop 값을 기반으로 하위 컴포넌트에 조건부 스타일을 추가하고 싶습니다.

다음은 조건부 스타일링의 실제 예입니다.

<li v-bind:class="[booleanValue ? 'stylingClassOne' : 'stylingClassTwo']"

하지만 이것은 내 스타일이 단일 변수를 기반으로 하고 두 개의 값(true/false)만 가질 수 있는 경우에만 작동합니다.

여러 값을 가질 수 있는 변수를 기반으로 조건부 스타일을 구현하고 싶습니다. 상위 구성 요소에서 하위 구성 요소로 문자열을 전달한다고 가정해 보겠습니다 stylingDecider，其值可以是 stylingClassOne、stylingClassTwo、stylingClassThree.

그래서 저는 다음을 하고 싶습니다: <li v-bind:class="getStylingClass(stylingDecider)"> 但这确实不起作用。我需要一个方法来决定样式是什么的原因是因为其中会进行一些其他处理，这些处理将返回基于所述处理的类，所以我不能只使用 <li v-bind:class="stylingDecider" .

내가 뭘 잘못했나요? 조언 부탁드립니다. 감사합니다. 저는 Vue 3과 bootstrap-vue 3을 사용하고 있습니다.

Answer 1

방금 작동하는 코드 조각을 만들었습니다.

으아악 으아악 으아악