我想根據從父組件傳遞的道具的值在子組件中添加條件樣式。
這是條件樣式的一個作業示例：
<li v-bind:
但這僅適用于當我的樣式基于只能是兩個值（真/假）的單個變數時。
我想基于可以采用多個值的變數來實作條件樣式。假設我將一個字串從我的父組件傳遞給我的子組件stylingDecider，它的值可以是stylingClassOne, stylingClassTwo, stylingClassThree.
因此我想做以下事情：
<li v-bind:>但這不起作用。我需要一種方法來決定樣式的原因是因為將在其中進行一些其他處理，該處理將基于所述處理回傳一個類，所以我不能只使用<li v-bind:.
我究竟做錯了什么？請指教，謝謝。我正在使用 Vue 3 和 bootstrap-vue 3。
uj5u.com熱心網友回復：
我剛剛創建了一個作業代碼片段。請看一看。希望它會有所幫助。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486807.html
標籤：javascript html css Vue.js 引导程序
上一篇：如何在簡單的html頁面中使用vue-select？
下一篇：每次單擊按鈕時如何更改文本？