Explication détaillée de la façon d'utiliser les variables dans les données dans le style VUE

Lors de la réutilisation de composants publics dans des projets récents, les valeurs des styles en CSS doivent être constamment modifiées pour différents scénarios, et il existe déjà des styles de composants publics globaux

Si vous utilisez la méthode traditionnelle de liaison dynamique de classe et de style de Vue pour modifier le style (mentionnée à la fin de l'article), vous devez écrire de nombreuses variables et classes de modules supplémentaires. Ensuite, si la valeur de mon style peut être obtenue. du composant parent, transmis au sous-composant, le sous-composant restitue la valeur du style correspondant en fonction de la valeur transmise. En fait, cela signifie utiliser les variables dans les données et les accessoires dans le style.

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

C'est en fait très simple. Cela ne prend que trois étapes. un coup d'oeil :

1. Structure HTML

<Upload

   ref="upload"

   :show-upload-list="false"

   :before-upload="handleBeforeUpload"

   :disabled="disabled"

   :max-size="maxSize"

   action
>

2. Définissez les "variables CSS" dans la portée

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

 --textAlignPosition: center;

 /deep/ .ivu-upload {

  text-align: var(--textAlignPosition);

 }

}
<style/>

3. () dans JS La méthode modifie la valeur de "--textAlignPosition", modifiant ainsi indirectement l'alignement du texte (text-align) de l'élément enfant correspondant

mounted() {

   this.$nextTick(function () {

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

     '--textAlignPosition',

     this.textAlign

    );

   });

}

Ceci est fait.

Passons en revue il existe deux autres façons de modifier le style dans Vue, 1 consiste à modifier dynamiquement la classe, 2 consiste à modifier dynamiquement le style

1 Dans Vue, vous. peut utiliser la syntaxe d'objet et la syntaxe de tableau pour modifier la classe

Syntaxe d'objet

html

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

js

data: {

 isActive: false,

 hasError: true

}

Syntaxe de tableau

html

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

js

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'
}

Il vous suffit de modifier dynamiquement les valeurs​​de isActive et hasError, vous pouvez lier différentes classes de p et supprimer la liaison

2. Dans vue, le style peut être modifié via la syntaxe d'objet et la syntaxe de tableau

Syntaxe d'objet

html

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

js

data: {

 activeColor: 'red',

 fontSize: 30

}

Syntaxe du tableau

html

<p v-bind:style="\[styleColor, styleSize\]"></p>

js

data: {

 styleColor: {

   color: 'red'

  },

 styleSize:{

   fontSize:'23px'

 }

}

Tant que vous changez les variables styleColor et styleSize dans data, vous pouvez modifier dynamiquement le style de p.

Recommandations d'apprentissage associées : Vidéos de programmation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!