gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:31:18 24 4
gpt4 key购买 nike

我想在文本字段中有条件地应用文本颜色类。我想要的类是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' 中可以防止解析错误,但对颜色没有影响。

有没有办法得到我想要的东西?

最佳答案

创建一个适用于输入的自定义范围样式(因为 v-text-field 的类适用于包含的 div)。

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

这个样式名可以包含连字符,只要在类表达式中被引用即可。使用 v-bind 绑定(bind)类...

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

关于javascript - 如何有条件地更改 vue/vuetify 文本字段颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54932104/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com