在vue组合框中更改背景颜色

lndjwyie 于 2021-09-23 发布在 Java

关注(0)|答案(2)|浏览(343)

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

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

vue.js JavaScript vuetify.js

来源：https://stackoverflow.com/questions/68313437/change-background-color-in-vue-combobox

2条答案

按热度按时间

pbgvytdp1#

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

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

三元运算符是vue动态类的有力工具。

赞(0）回复(0）举报 2021-09-23

vddsk6oq2#

您可以使用选择槽进行此操作

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

赞(0）回复(0）举报 2021-09-23

我来回答

在vue组合框中更改背景颜色

2条答案

相关问题

热门标签

最新问答