How to add conditional styling in Vue.js using a method?-CodePudding

I want to add conditional styling in a child component based on the values of a prop passed from the parent component.

This a working example of conditional styling:

<li v-bind:

but this is only applicable for when my styling is based on a single variable which can only be of two values (true/false).

I want to achieve conditional styling based on a variable that can take multiple values. Assume I pass a string from my parent component to my child component stylingDecider, which can be of values stylingClassOne, stylingClassTwo, stylingClassThree.

Therefore I want to do the following: <li v-bind:> but this does not work. The reason I need a method to decide what the styling is because there will be some other processing going on in the that will return a class based on said processing, so I can't just use <li v-bind:.

What am I doing wrong? Please advise, thanks. I am using Vue 3 and bootstrap-vue 3.

CodePudding user response：

I just created a working code snippet. Please have a look. Hope it will help.

Vue.component('child', {
  props: ['dynamicstyle'],
  template: `<ul><li v-bind:>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>