javascript 如何有条件地更改 vue/vuetify 文本字段颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54932104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change vue/vuetify text field color conditionally
提问by goodson
I'd like to conditionally apply a text color class in a text field. The class I want is red--text, like this:
我想有条件地在文本字段中应用文本颜色类。我想要的课程是red--text这样的：
:class="{ red--text: myModel.someBool }"
...but that results in a parse error. The problem is related to the class name, I think, because this works:
...但这会导致解析错误。我认为问题与类名有关，因为这有效：
<v-text-field
v-model="myModel" label="My Text"
:class="{ red: myModel.someBool }"
></v-text-field>
...but I want to color the text, not the whole field.
...但我想为文本着色，而不是整个字段。
Enclosing the desired class name in quotes 'red--text'prevents the parse error, but has no effect on the color.
将所需的类名括在引号中'red--text'可以防止解析错误，但对颜色没有影响。
Is there a way to get what I want?
有没有办法得到我想要的？
回答by NaN
Create a custom scoped style that applies itself to the input (since the class of v-text-field is applied to a containing div).
创建一个适用于输入的自定义范围样式（因为 v-text-field 类应用于包含的 div）。
<style scoped>
.my-text-style >>> .v-text-field__slot input {
color: red
}
</style>
This style name can contain hyphens, as long as it is quoted in the class expression. Bind the class with v-bind...
这个样式名称可以包含连字符，只要它在类表达式中被引用。使用 v-bind 绑定类...
<v-text-field
v-model="myModel" label="My Text"
:class="{ 'my-text-style': myModel.someBool }"
></v-text-field>
回答by Pallav Chanana
You can use v-bind with ternary condition to apply style
您可以使用带有三元条件的 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/>
Note - You cannot user color for changing text by using. & highlight box color as well as if you use background-color in place of border you can change whole field color.
注意 - 您不能使用颜色来更改文本。& 突出显示框颜色以及如果您使用背景颜色代替边框，您可以更改整个字段颜色。
回答by Viktor Korsun
you can conditionally bind classes like this:
你可以有条件地绑定这样的类：
:class="myModel.someBool ? 'red--text' : ''"
回答by pintoflager
You might as well set the actual class from data()
您不妨从 data() 设置实际类
data: function () {
return {
testClass: 'red--text'
}
}
And bind your text fields class to that value :class="testClass"
并将您的文本字段类绑定到该值 :class="testClass"
Then in methods alter the whole class
然后在方法中改变整个班级
methods: {
uploader() {
this.testClass = 'primary--text'
}
}
