Vueで条件付きでクラスを追加する方法は？

Question

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要素の値に基づいて、バッジのスタイルをバインドする（高、中、低のいずれかのクラスを追加する）ことです。どうすればこれを達成できますか？

Answer 1

関数を作成して条件比較値をそれに渡すことができます

<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

}

これは、複雑な状況で役立つ場合があります。