javascript - 如何有条件地更改 vue/vuetify 文本字段颜色
问题描述
我想有条件地在文本字段中应用文本颜色类。我想要的课程是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 绑定类...
<v-text-field
v-model="myModel" label="My Text"
:class="{ 'my-text-style': myModel.someBool }"
></v-text-field>
推荐阅读
- mysql - 用最大和最小标记更新每一行
- javascript - 如何停止监听 Firebase Firestore 中的数据库更改?
- google-people-api - 是否可以通过 Apps 脚本删除 Google 其他联系人?
- disassembly - IDA PRO 更改 .rdata 值
- docker - 入口 Nginx 规则并不总是得到遵守
- apache-spark - 如何将ojai配置从驱动程序传递给spark中的执行程序?
- reactjs - useMemo 钩子不适用于地图元素
- mysql - MYSQL 在一段时间不活动后失去连接
- flutter - 如何使用颤振 mime 包通过幻数获取 mime 类型
- vba - VBA - 如何优化 VBA 代码以更快地运行?