如何使用方法在 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