뷰3 스타일 클래스 인라인 바인딩 (Vue.js 3 Style Class inline Binding)

Vue.js 에서 리스트 항목을 표시할 때 반복문을 사용하게 되는데,

특정 조건에 따라서 글자색, 배경색 등 style class 를 변경해야 하는 경우가 많습니다.

 

여러가지 방법이 많지만 이번에는 if 인라인 형태로  쉽게 처리하는 방법을 설명하겠습니다.

Vue.js 3 클래스 인라인 바인딩

    <div class="list-group">
        <div class="list-group-item" v-for="(item,index) in dataLists" :key="index">
            <div>
                <span class="badge badge-pill" v-bind:class="(item.Result === '합격') ? 'badge-success':'badge-danger'">{{item.Result}}</span>
            </div>
        </div>
    </div>

 

위의 코드는 dataLists  반복하면서 Result 값이 합격일 경우 span 태그에 추가하는 방법입니다.

 

저 또한 이렇게 간단한 방법도 생각이 나지 않아서 방법을 설명해 드립니다.