Klasse und Stil sind Attribute von HTML-Elementen und werden zum Festlegen des Stils von Elementen verwendet. Wir können v-bind verwenden, um Stilattribute festzulegen.
Das folgende Beispiel legt den Klassenstil im Style-Tag fest. Es gibt nur einen booleschen Wert isActive in der Vue-Instanz, indem v-bind:class="{ active: isActive }" verwendet wird. Binden Sie den Stil und entscheiden Sie, ob basierend auf dem booleschen Wert gerendert werden soll.
<style>.active { width: 100px; height: 100px; background: green;}</style><p id="app"> <p v-bind:class="{ active: flag}"></p></p><script>new Vue({ el: '#app', data: { flag: true } }) </script>
Mehrere Klassen binden
v-bind:class="{ active: isActive, 'text-danger': hasError }">
in Objektform Mehrere Klassen binden Klassen
<p id="app"> <p v-bind:class="classObject"></p></p><script>new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true } } }) </script>
Bindungsstile
<p id="app"> <p v-bind:class="[activeClass, errorClass]"></p></p><script>new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script>
Bindung von Inline-Stilen
<p id="app"> <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</p></p><script>new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 30 } })
Inline-Stile mithilfe von Objekten binden
<p id="app"> <p v-bind:style="styleObject">菜鸟教程</p></p><script>new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px' } } }) </script>
Das obige ist der detaillierte Inhalt vonvue.js-Stilbindungsproblem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!