Vue에서 클래스를 조건부로 추가하려면 어떻게 해야 합니까?

Vue에서 클래스를 조건부로 추가하려면 어떻게 해야 합니까?

Vue로 변환하는 프로젝트가 있는데 데이터베이스에서 반환되어 Vue로 렌더링되는 항목에 따라 어떤 요소에 클래스를 조건부로 추가할 수 있는지 궁금했습니다.Vue를 사용하지 않을 때 사용한 어플리케이션 코드는 다음과 같습니다.

$(document).ready(function() {
  $('.task_element').each(function(index, element) {
    if ($(element).find(".task_priority").text().trim() === "high") {
      $(element).addClass('high');
    } else if ($(element).find(".task_priority").text().trim() === "medium") {
      $(element).addClass('medium');
    } else if ($(element).find(".task_priority").text().trim() === "low") {
      $(element).addClass('low');
    }
  });
});

그리고 이것은 잘 작동했다.그런데 Vue를 좀 더 쉽게 할 수 있는 방법이 있을까요?아니면 이걸 Vue 앱에 넣을 방법을 찾아야 하나요?

다음은 컴포넌트의 일부입니다.

<p class="task_description">
  {{ task.description }} <span class="badge badge-pill">priority</span>
</p>
<p class="task_priority">
  {{ task.priority }}
</p>

배지의 스타일을 바인드하고 싶다(높음, 중간 또는 낮음 중 하나의 클래스 추가)task_priority요소.어떻게 하면 좋을까요?

위의 코드를 html 템플릿의 조건부 클래스에 대해 시도할 수 있습니다.

<element v-bind:class = "(condition)?'class_if_is_true':'else_class'"></element>

이 항목에 대한 공식 Vue 설명서를 여기에서 볼 수 있습니다.

조건이 true인 경우에만 클래스를 추가할 필요가 있는 경우 다음을 사용할 수 있습니다.

<p v-bind:class="{ 'className' : priority === low}"></p>

또는 생략하여 단축 표기법을 사용할 수 있습니다.v-bind

<p :class="{ 'className' : priority === low}"></p>

이렇게 하면 상태가 거짓으로 판명되더라도 신경 쓸 필요가 없습니다.

Vue 클래스바인딩에서는 이 작업을 요소에서 올바르게 인라인으로 수행할 수 있으며 Vue 계산 클래스를 추가하여 원하는 클래스를 실제로 추가할 수 있습니다.

예를 들어 다음과 같습니다.

<div class="task_priority" :class="task.priority">{{ task.priority }}</div>

그리고 스타일링을 그렇게 한다(출력을 가정하여)task.priority"높음, 중간, 낮음" 게시된 코드에 따라 달라질 것 같습니다.

.task_priority.high {color: red}
.task_priority.medium {color: yellow}
.task_priority.low {color: green}

함수와 통과 조건의 비교 값을 만들어 볼 수 있습니다.

<span bind:class="BindOrderStatus(order.status)">{{order.status}}</span>

다음과 같은 기능을 제공합니다.

 methods: {
    BindOrderStatus: function (status){
        if(status === "received")
        {
            return "badge badge-pill badge-primary pending-badge";
        }else if(status === "accepted" || status === "auto-accepted"){
            return "badge badge-pill badge-primary in-progress-badge"
        }.......etc conditions

}

이것은 복잡한 상황에 도움이 될 수 있습니다.

언급URL : https://stackoverflow.com/questions/52124081/how-to-add-a-class-conditionally-in-vue