Klasse ändern bedingt vue.js

Question

Ich habe eine Tabelle und möchte die Klasse abhängig vom Wert ändern.

Mein erster Ansatz war, v-bind:class="{} zu verwenden, das wird auf die richtige Klasse wechseln, wenn es wahr ist. Allerdings sollte ich neue Elemente für jeden Wert in meiner Tabelle erstellen, die nicht wie die beste Option aussieht.

Gibt es eine Möglichkeit conditionals zu bedienen, wie if {{value}} > 5 class:something

schrieb ich ein kleines jsfiddle mit, wie ich es richtig funktioniert jetzt. Die Idee ist, dass jedes Element in der Tabelle, diesen Regeln, ohne die Notwendigkeit von Schreib folgt einer if-Anweisung für jede Zelle:

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

Answer 1

Ich vermute, ein wenig auf Ihrer Absicht, aber so etwas wie diese.

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

Vorlage

<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 aktualisiert.

Answer 2

würde ich v-Anwendung:

<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> 

und einfacher App:

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

fiddle

Natürlich können Sie zwei v-for tun können, Zeilen und Spalten zu erzeugen, und ändern Sie Ihre Daten nach Ihren Bedürfnissen.

Sie können auch Methoden für Bedingungen verwenden, aber es liegt an Ihnen.