Bagaimana untuk menambah gaya bersyarat dalam Vue.js menggunakan kaedah?

Question

Saya ingin menambah penggayaan bersyarat dalam komponen anak berdasarkan nilai prop yang diluluskan daripada komponen induk.

Berikut ialah contoh penggayaan bersyarat yang berfungsi:

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

Tetapi ini hanya berfungsi apabila gaya saya berdasarkan satu pembolehubah dan hanya boleh mempunyai dua nilai (benar/salah).

Saya ingin melaksanakan penggayaan bersyarat berdasarkan pembolehubah yang boleh mengambil berbilang nilai. Katakan saya menghantar rentetan daripada komponen induk kepada komponen anak stylingDecider，其值可以是 stylingClassOne、stylingClassTwo、stylingClassThree.

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

Apa salah saya? Mohon nasihat, terima kasih. Saya menggunakan Vue 3 dan bootstrap-vue 3.

Answer 1

Saya baru sahaja mencipta coretan kod yang berfungsi:

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