更改vue组合框中的背景色

Question

我想改变我的组合框背景或文本颜色。到目前为止，我一直在使用:class="{green : isInfinite}"，但我不能百分之百地确定。还有别的办法吗？我正在寻找一个不使用scss的解决方案。它看起来是这样的：

​

​

<template>
      <v-combobox
          v-model="key"
          :items="items"
          :search-input.sync="search"
          hide-selected
          @change="getParameters(key)"
          return-object
          label="Search script"
          persistent-hint
          :class="{green : isInfinite}"
          class="ml-9"
          style="width: 75%;"
      >
</template>

<script>
export default {
 data: () => ({
  isInfinite: false
 })
}
</script>

Answer 1

我不确定我是否完全理解了这个问题，但我更喜欢在你的情况下：

:class="['some static claass', somethingIsTrue ? 'trueClass' : 'falseClass']"

三元运算符是vue动态类的强大工具。

Answer 2

为此，您可以使用选择插槽

<template>
  <v-combobox
    v-model="key"
    :items="items"
    :search-input.sync="search"
    hide-selected
    @change="getParameters(key)"
    return-object
    label="Search script"
    persistent-hint
    :class="{ green: isInfinite }"
    class="ml-9"
    style="width: 75%"
  >
    <template v-slot:selection="{ item }">
      <span class="txt-color">{{ item }}</span>
    </template>
  </v-combobox>
</template>

<style scoped>
.txt-color {
  color: green; /*changes the text color*/
  background-color: blue; /*changes the text background color*/
}
</style>

您还可以有条件地添加类

<span :class="{'txt-color': isInfinite}">{{ item }}</span>