Lorsque j'ai utilisé v-bind:style pour utiliser des valeurs dynamiques, j'ai été confronté au problème de v-bind:style qui ne fonctionnait pas, mais je suis sûr que v-bind:style a obtenu la valeur correcte (:style='{dans la console La couleur : rouge (toute autre valeur) }') et le CSS dans la section style sont reflétés avec succès. Pourquoi ne pas utiliser v-bind ? Des idées? ? Merci beaucoup.
<div class="l-modal" v-if="modalVisible1"> <div class="p-modal" @click="hide_modal" :style='{ color : titleColor1 }' ref="test"> <p>{{titleTxt1}}</p> <p>{{contentTxt1}}</p> <p>{{endTxt1}}</p> <button class="p-modal__btn">{{buttonTxt1}}</button> </div> </div> <div class="l-modal__bg" v-if="modalBgVisible1" @click="hide_modal"></div>
data () { return { selected_title_color1:'', titleColor1:'', colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'], colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'}, } }, watch:{ selected_title_color1: function () { this.titleColor1 = this.colors_dic[this.selected_title_color1]; } },
Veuillez vérifier l'extrait de code suivant, tout semble bien :
Comme mentionné ci-dessus, vous devez utiliser l'attribut
compulated
pour les styles.Cela reflétera également automatiquement toute modification apportée à l'accessoire.
Si vous avez certaines conditions, vous pouvez également modifier les valeurs en fonction des valeurs calculées dans la fonction de rappel. J'ai ajouté un exemple de Dark Mode pour illustrer cette approche.
Ensuite, utilisez
:style="style"
pour l'ajouter à votre div.Conseils de mon côté. Au lieu d'utiliser un observateur, j'externaliserais le code de définition de la couleur et je lierais cette méthode à l'événement qui change la couleur. Cela peut rendre votre application plus flexible et la nettoyer. Mais ce que vous faites fonctionne aussi.