改变V-select标签和项目的文本颜色的方法

Question

我一直在尝试更改v-select标签和项目的文本颜色，但找不到相应的属性来实现，我可以更改背景颜色，但无法更改v-select内部的标签或文本项目。以下是示例代码：

<div id="app">
    <v-app id="inspire">
        <v-container fluid>
            <v-row align="center">
                <v-col
                 class="d-flex"
                 cols="12"
                 sm="6"
                 >
                 <v-select
                 :items="items"
                 label="Standard"
                 background-color="#000000"
                 color="#ffffff"
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 1

您可以使用item插槽来自定义标签的渲染：

<v-select :items="items" label="Standard" background-color="#000000" color="#ffffff">
  <template #item="{item}">
    <span style="color:white; background:blue">{{item.name}}<span>
  </template>
</v-select>