Ausführliche Erklärung zur Verwendung von Variablen in Daten im VUE-Stil

Bei der Wiederverwendung öffentlicher Komponenten in aktuellen Projekten müssen die Werte der Stile in CSS für verschiedene Szenarien ständig geändert werden, und es gibt bereits globale Stile für öffentliche Komponenten.

Wenn Sie die traditionelle dynamische Bindung von Vue verwenden, um den Stil zu ändern Durch die Definition von Klasse und Stil (am Ende des Artikels erwähnt) müssen Sie viele zusätzliche Variablen und Modulklassen schreiben. Wenn der Wert meines Stils dann von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden kann, ist dies die untergeordnete Komponente wird basierend auf dem übergebenen Wert geändert. Das Rendern des Werts des entsprechenden Stils bedeutet tatsächlich, dass die Variablen in den Daten und Requisiten im Stil verwendet werden. 🔜 im Rahmen der Aktionsvariable „

<Upload

   ref="upload"

   :show-upload-list="false"

   :before-upload="handleBeforeUpload"

   :disabled="disabled"

   :max-size="maxSize"

   action
>

3. Ändern Sie den Wert von „--textAlignPosition“ über die setProperty()-Methode in JS und ändern Sie dadurch indirekt die (textausgerichtete) Textausrichtung des entsprechenden untergeordneten Elements

<style lang="less" scoped>
.info-img-wrap {

 --textAlignPosition: center;

 /deep/ .ivu-upload {

  text-align: var(--textAlignPosition);

 }

}
<style/>

Dies ist fast fertig.

Sehen wir uns an, dass es zwei weitere Möglichkeiten gibt, den Stil in Vue zu ändern: 1. besteht darin, die Klasse dynamisch zu ändern, 2. darin, den Stil dynamisch zu ändern.

1. In Vue können Sie die Klasse über die Objektsyntax und die Array-Syntax ändern

Objektsyntax

html

mounted() {

   this.$nextTick(function () {

    this.$refs.upload.$el.style.setProperty(

     '--textAlignPosition',

     this.textAlign

    );

   });

}

js

<p v-bind:class="{ &#39;active&#39;: isActive, &#39;text-danger&#39;: hasError }"></p>

Array-Syntax

html

data: {

 isActive: false,

 hasError: true

}

js

<p v-bind:class="\[isActive ? activeClass : &#39;&#39;, errorClass\]"></p>

Sie müssen nur die Werte von isActive und hasError dynamisch ändern kann verschiedene Klassen binden und entferne die Bindung von p

2. Der Stil kann in Vue durch Objektsyntax und Array-Syntax geändert werden. Objektsyntax. HTML.

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'
}

. js.

<p v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></p>

. Array-Syntax. HTML

data: {

 activeColor: 'red',

 fontSize: 30

}

Ändern Sie einfach die Variablen styleColor und styleSize, Sie können den Stil von p dynamisch ändern.

Verwandte Lernempfehlungen:

Programmiervideos

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Variablen in Daten im VUE-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!