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'
   }
  }
}

VueJs：下拉项背景色

1 个答案: