Comment ajouter des styles conditionnels dans Vue.js à l'aide de méthodes ?

Question

Je souhaite ajouter un style conditionnel dans le composant enfant en fonction de la valeur de accessoire transmise par le composant parent.

Voici un exemple concret de style conditionnel :

<li v-bind:class="[booleanValue ? 'stylingClassOne' : 'stylingClassTwo']"

Mais cela ne fonctionne que lorsque mon style est basé sur une seule variable et ne peut avoir que deux valeurs (vrai/faux).

Je souhaite implémenter un style conditionnel basé sur une variable pouvant prendre plusieurs valeurs. Disons que je passe une chaîne du composant parent au composant enfant stylingDecider，其值可以是 stylingClassOne、stylingClassTwo、stylingClassThree.

Je veux donc faire ce qui suit : <li v-bind:class="getStylingClass(stylingDecider)"> 但这确实不起作用。我需要一个方法来决定样式是什么的原因是因为其中会进行一些其他处理，这些处理将返回基于所述处理的类，所以我不能只使用 <li v-bind:class="stylingDecider" .

Qu'est-ce que j'ai fait de mal ? S'il vous plaît conseiller, merci. J'utilise Vue 3 et bootstrap-vue 3.

Answer 1

Je viens de créer un extrait de code fonctionnel :

Vue.component('child', {
  props: ['dynamicstyle'],
  template: `
Hello !!
`,
  methods: {
    getStylingClass(stylingDecider) {
        return stylingDecider;
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
        stylingDecider: 'stylingClassTwo'
  }
});

.stylingClassTwo {
  background: green;
}

sssccc