vue.js bindet Klassen- und Stilstile

Eine häufige Anforderung für die Datenbindung ist die Manipulation der Klassenliste eines Elements und seiner Inline-Stile. Da es sich bei beiden um Attribute handelt, können wir sie mit v-bind verarbeiten: Wir müssen lediglich die endgültige Zeichenfolge des Ausdrucks auswerten. Die Verkettung von Zeichenfolgen ist jedoch umständlich und fehleranfällig. Daher verbessert Vue.js v-bind speziell, wenn es mit Klassen und Stilen verwendet wird. Der Ergebnistyp eines Ausdrucks kann neben Strings auch ein Objekt oder ein Array sein.

Verwenden Sie v-bind:class oder :class, um Stil oder Klasse zu binden

Klasse binden

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

js-Code

var myVue = new Vue({
   el: ".test",
   data: {
     isActive:true,
     isCc:false
   },
 });

Oder der folgende Code kann auch implementiert werden

<div class="test">
   <div :class=classObject></div>
 </div>

js-Code

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

Klasse über Array binden

<div class="test">
  <div :class="[activeClass,error]">dsdsd</div>
</div>

JS-Code

var myVue = new Vue({
   el: ".test",
   data: {
     activeClass:"active",
     error:"ddd"
   },
 });

Stilattribut binden

<div class="test">
    <div :style=styleObject>dsdsd</div>
  </div>

JS-Code

var myVue = new Vue({
  el: ".test",
  data: {
    styleObject:{
     color: "red",
      fontSize: "30px"
    }
  },
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt und ich hoffe, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zu vue.js-Bindungsklassen und -Stilen finden Sie auf der chinesischen PHP-Website!