1. Objektsyntax
1. Legen Sie ein Objekt für v-bind:class fest, um Klassen dynamisch zu wechseln, zum Beispiel:
<div id="app">
<div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true
}
})
</script>
Das endgültige Rendering-Ergebnis: <div class="active"></div>
2. Im Objekt können auch mehrere Attribute vorhanden sein, und die Klasse kann dynamisch gewechselt werden. :class kann mit der Klasse koexistieren
<div id="app">
<div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
isError:false
}
})
</script>
Endgültiges Rendering-Ergebnis: <div class="static active"></div>
3. Wenn der Ausdruck von :class zu lang oder die Logik komplex ist, können Sie ein berechnetes Attribut binden. Wenn es mehr als zwei Bedingungen gibt, können Sie im Allgemeinen Daten oder berechnet verwenden
<div id="app">
<div :class="classes"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
isError:null
},
computed:{
classes(){
return {
active:this.isActive && !this.error,
'text-fail':this.error && this.error.type ==='fail'
}
}
}
})
</script>
2. Array-Syntax
1. Wenn mehrere Klassen angewendet werden müssen, können Sie die Array-Syntax verwenden, um ein Array an :class zu binden und eine Klassenliste anzuwenden:
<div id="app">
<div :class="[atvieCls,errorCls]"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
atvieCls:'active',
errorCls:'error'
}
})
</script>
Das endgültige Rendering-Ergebnis: <div class="active error"></div>
2. Verwenden Sie ternäre Ausdrücke, um Klassen entsprechend den Bedingungen zu wechseln (wenn die Daten isActive wahr sind, wird der aktive Stil angewendet).
<div id="app">
<div :class="[isActive ? activeCls : '',errorCls]"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
atvieCls:'active',
errorCls:'error'
}
})
</script>
Das Rendering-Ergebnis lautet: <div class="active error"></div>
3. Wenn die Klasse mehrere Bedingungen hat, ist es umständlich, so zu schreiben. Sie können die Objektsyntax in der Array-Syntax verwenden:
<div id="app">
<div :class="[{'active':isActive},errorCls]"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
errorCls:'error'
}
})
</script>
Das gerenderte Ergebnis ist: <div class="active error"></div>
4. Wie bei der Objektsyntax können auch Daten, berechnet und Methoden verwendet werden. Nehmen Sie als Beispiel berechnete Eigenschaften:
<div id="app">
<button :class="classes"></button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 'large',
disabled: true
},
computed: {
classes: function () {
return [
'btn',
{
['btn-'+this.size]: this.size!=='',
['btn-disabled']: this.disabled,
}
]
}
}
})
</script>
Endgültiges Rendering-Ergebnis: <div class="btn btn-large btn-disabled"></div>
3. Verwendung auf Komponenten
Wenn Sie class oder :class direkt auf einer benutzerdefinierten Komponente verwenden, werden die Stilregeln direkt auf das Stammelement dieser Komponente angewendet. Deklarieren Sie beispielsweise eine einfache Komponente:
<script>
Vue.component('my-component', {
template: '<p class="article">一些文本</p>'
})
</script>
<div id="app">
<my-component :class="'active':isActive"></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
Das Ergebnis des endgültigen Komponentenrenderings ist:<p class="article active">一些文本</p>