如何使用方法在 Vue.js 中新增條件樣式？

Question

我想根據從父元件傳遞的 prop 值在子元件中新增條件樣式。

這是條件樣式的工作範例：

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

但這只適用於當我的樣式是基於單一變數且只能有兩個值（true/false）時。

我想基於可以採用多個值的變數來實現條件樣式。假設我將一個字串從父元件傳遞到子元件 stylingDecider，其值可以是 stylingClassOne、stylingClassTwo、stylingClassThree。

因此我想做以下事情： <li v-bind:class="getStylingClass(stylingDecider)"> 但這確實不起作用。我需要一個方法來決定樣式是什麼的原因是因為其中會進行一些其他處理，這些處理將返回基於所述處理的類，所以我不能只使用<li v-bind:class="stylingDecider " 。

我做錯了什麼？請指教，謝謝。 我正在使用 Vue 3 和 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;
}

sssccc