html - VueJS : dropdown items background color

Question

试图了解样式在 Web 开发 (VueJS) 中的工作原理，但我正在为一些事情而苦苦挣扎:

我正在(动态地)显示一些下拉菜单(彩色)，其中包含下拉项。

我想更改那些下拉项的背景色。无法真正理解风格是如何运作的。

我的(合乎逻辑的)想法是从父下拉列表继承？

下拉代码:

<b-dropdown variant="danger" size="sm" v-for="item in rubriquesFullyLoaded" :key="item.id"  v-bind:text="item.libelle" id="ddown1" class="m-md-1" v-if="item.libelle == 'Services Magasins'">
       <b-dropdown-item variant="danger" v-on:click="maj(enfant, 1)" v-for="enfant in item.childs" :key="enfant.id"  v-bind:text="enfant.id" v-if="item.childs !== null">
         {{ enfant.libelle }}
       </b-dropdown-item>
</b-dropdown>

谢谢!

Answer 1

如果您使用的是 vue-bootstrap，则需要添加您的样式以覆盖 App.vue 中的库样式，在父组件中 & 如果您需要更新样式，则有一个vue中的动态类你可以通过这些类来完成，例如:

//example for bind styling
<div v-bind:style="theVariable ? styleObject : ''"></div>

//example for dynamic class
<div :class="theVariable ? theNewClass : theOldClass"></div>

data: {
  return {
   theVariable: true,
   styleObject: {
     color: 'red',
     fontSize: '13px'
   }
  }
}