如何有条件地更改 vue/vuetify 文本字段颜色

Question

我想有条件地在文本字段中应用文本颜色类。我要的课是red--text，像这样：

:class="{ red--text: myModel.someBool }"

...但这会导致解析错误。我认为这个问题与类名有关，因为它有效：

<v-text-field
  v-model="myModel" label="My Text"
  :class="{ red: myModel.someBool }"
></v-text-field>

...但我想为文本着色，而不是整个字段。

将所需的类名括在引号'red--text' 中可防止解析错误，但对颜色没有影响。

有没有办法得到我想要的？

Answer 1

你也可以使用方法来做到这一点

<template>
  <div>
    <v-btn text :color="tabColor(1)" @click="selectTab(1)">Tab 1</v-btn>
    <v-btn text :color="tabColor(2)" @click="selectTab(2)">Tab 2</v-btn>
  </div>
</template>

<script>

export default {
  data() {
    return {
      currentTab: 1
    };
  },
  methods: {
    selectTab(tab) {
      this.currentTab = tab;
    },
    tabColor(tab) {
      return tab == this.currentTab ? "primary" : "normal";
    },
  },
};

</script>

Answer 2

您可以使用 v-bind 和三元条件来应用样式

 <v-text-field
       v-bind:style="{'border': documentData[name] ? 'solid green 1px !important':'solid red 1px!important'}"
       v-model="documentData[name]"
       :label="name"
       :placeholder="value"
        regular/>

注意 - 您不能使用颜色来更改文本。 & 突出显示框颜色以及如果您使用背景颜色代替 边框，您可以更改整个字段的颜色。

Answer 3

你不妨从 data() 中设置实际的类

data: function () {
        return {
            testClass: 'red--text'
        }
    }

并将您的文本字段类绑定到该值:class="testClass"

然后在方法中改变整个类

methods: {    
        uploader() {
            this.testClass = 'primary--text'
        }
    }

Answer 4

你可以像这样有条件地绑定类：

:class="myModel.someBool ? 'red--text' : ''"

Answer 5

创建一个将自身应用于输入的自定义范围样式（因为 v-text-field 类应用于包含 div）。

<style scoped>
  .my-text-style >>> .v-text-field__slot input {
    color: red
  }
</style>

该样式名称可以包含连字符，只要它在类表达式中被引用即可。用 v-bind 绑定类...

<v-text-field
  v-model="myModel" label="My Text"
  :class="{ 'my-text-style': myModel.someBool }"
></v-text-field>