コンテンツに依存するCSSクラスを選択

Question

CSSに問題があります。

<tr>要素クラスを選択します。私はブートストラップを使用しており、.successまたは.dangerのようなブートストラップクラスを使用したいと考えています。

私はvue.jsを使用していますが、ID、名前、ステータスなどのオブジェクトを持っています。ステータス名は.successまたは.dangerと一致しませんが、この2つのクラスはステータス名によって異なります。

私は2つの解決策を知っている：

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を見てください。