Wie füge ich mithilfe von Methoden bedingte Stile in Vue.js hinzu?

Question

Ich möchte der untergeordneten Komponente einen bedingten Stil hinzufügen, der auf dem von der übergeordneten Komponente übergebenen Requisitenwert basiert.

Hier ist ein funktionierendes Beispiel für bedingtes Styling:

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

Aber das funktioniert nur, wenn mein Stil auf einer einzelnen Variablen basiert und nur zwei Werte (wahr/falsch) haben kann.

Ich möchte bedingtes Styling basierend auf einer Variablen implementieren, die mehrere Werte annehmen kann. Nehmen wir an, ich übergebe eine Zeichenfolge von der übergeordneten Komponente an die untergeordnete Komponente stylingDecider，其值可以是 stylingClassOne、stylingClassTwo、stylingClassThree.

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

Was habe ich falsch gemacht? Bitte um Rat, danke. Ich verwende Vue 3 und Bootstrap-Vue 3.

Answer 1

我刚刚创建了一个工作代码片段：

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

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

.stylingClassTwo {
  background: green;
}