如何在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: `<ul><li v-bind:class="getStylingClass(dynamicstyle)">Hello !!</li></ul>`,
methods: {
getStylingClass(stylingDecider) {
return stylingDecider;
}
}
});
var app = new Vue({
el: '#app',
data: {
stylingDecider: 'stylingClassTwo'
}
});

.stylingClassTwo {
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<child :dynamicstyle="stylingDecider">
</child>
</div>