如何有条件地更改 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' 可以防止解析错误，但对颜色没有影响。

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

原文由 goodson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

创建一个将自身应用于输入的自定义范围样式（因为 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>

原文由 NaN 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Viktor Korsun 发布，翻译遵循 CC BY-SA 4.0 许可协议