条件クラスを変更するvue.js

Question

私はテーブルを持っており、値に応じてクラスを変更したいと思います。

私の最初のアプローチはv-bind:class="{}を使用することでした。これが正しい場合、これは正しいクラスに変更されます。しかし、このようにすると、テーブル上の各値に対して新しい要素を作成する必要があります。この要素は最適なオプションのようには見えません。 if {{value}} > 5 class:something

よう

条件文を使用する方法はあり

は、私が今働いて、それを得た方法で小さな jsfiddleを書きました。私はあなたの意図に少し推測している

if (this.v1 < 4) { 
    this.goodBox = true 
    } else if (this.v1 < 6) { 
    this.goodBox = true 
    } else { 
    this.badBox = true 
    } 

Answer 1

を、このような何か：アイデアは、テーブル内の各要素は、各セルのための文の書き込みを必要とせずに、AN場合は、これらのルールに従うということです。

changeClass(value) { 
    return { 
    'good_box': value <= 4, 
    'medium_box': value > 4 && value <= 6, 
    'bad_box': value > 6 
    } 
} 

テンプレート

<table style="width:100%; border:1px solid black"> 
    <tr> 
    <td :class="changeClass(v1)">{{v1}}</td> 
    <td :class="changeClass(v2)">{{v2}}</td> 
    </tr> 
    <tr> 
    <td :class="changeClass(v3)">{{v3}}</td> 
    <td :class="changeClass(v4)">{{v4}}</td> 
    </tr> 
</table> 

はfiddleを更新しました。

Answer 2

私はのためのV-使用します。あなたは、行と列を生成するために、2つのV-のための操作を行うことができ、もちろん

var test = new Vue({ 
    el: '#app', 
    data: { 
    values:[ 
     3, 
     5, 
     20, 
     15], 
    }, 
}); 

fiddle

：

<div id="app"> 
    <table style="width:100%; border:1px solid black"> 
     <tr v-for="v in values" v-bind:class="{ good_box:v < 4, medium_box:v < 6, bad_box:v >= 6}"> 
     <td>{{v}}</td> 
     </tr> 
    </table> 
</div> 

そしてシンプルなアプリを必要に応じてデータを変更してください。

条件式のメソッドを使用することもできますが、それはあなた次第です。