콘텐츠에 따라 CSS 클래스를 선택하십시오.

Question

CSS에 문제가 있습니다.

<tr> 요소 클래스를 선택하고 싶습니다. 부트 스트랩을 사용하고 .success 또는 .danger과 같은 부트 스트랩 클래스를 사용하고 싶습니다.

나는 vue.js를 사용하며 ID, 이름, 상태 등의 개체가 있습니다. 상태 이름은 .success 또는 .danger와 일치하지 않지만이 두 클래스는 상태 이름에 따라 다릅니다.

1. 클래스 이름 상태 이름에 따라 반환하는 JS 함수를 작성 :
   나는 두 가지 해결책을 알고있다. <tr class={{myFun(object.status)}}. 내 기능은 간단한 사례입니다.
2. sass에서 부트 스트랩 클래스 이름을 확장합니다. .STATUS { @extend .success; }

내가 아주 간단한 정적 HTML 페이지를 생성하기 전에 내가, 프론트 엔드와 초보자 그리고 난 내가 사용해야하는 솔루션 궁금 하군요? 어쩌면 또 하나? 나는 인터넷에서 무언가를 찾으려고했지만 아무런 관심도 찾지 못했습니다.
아무도 저에게 조언을 드릴 수 있습니까?

Answer 1

당신이 사용할 수있는 뷰의 내장 클래스 지시자, 그래서 같은 :

<tr 
    :class="{ 
    'success': object.status === 'somestatus', 
    'error': object.status === 'otherstatus' 
    }"> 
    ... 
</tr> 

그것을위한 새로운 방법을 쓸 필요가 없습니다. 더 많은 예제를 보려면 Class & Style Bindings Guide을보십시오.