如何使用方法在 Vue.js 中新增條件樣式?
P粉327903045
P粉327903045 2024-03-21 20:53:17
0
1
369

我想根據從父元件傳遞的 prop 值在子元件中新增條件樣式。

這是條件樣式的工作範例:

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

但這只適用於當我的樣式是基於單一變數且只能有兩個值(true/false)時。

我想基於可以採用多個值的變數來實現條件樣式。假設我將一個字串從父元件傳遞到子元件 stylingDecider,其值可以是 stylingClassOnestylingClassTwostylingClassThree

因此我想做以下事情: <li v-bind:class="getStylingClass(stylingDecider)"> 但這確實不起作用。我需要一個方法來決定樣式是什麼的原因是因為其中會進行一些其他處理,這些處理將返回基於所述處理的類,所以我不能只使用<li v-bind:class="stylingDecider "

我做錯了什麼?請指教,謝謝。 我正在使用 Vue 3 和 bootstrap-vue 3。

P粉327903045
P粉327903045

全部回覆(1)
P粉653045807

我剛剛創建了一個工作程式碼片段:

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!