如何更改 vue.js 中提示属性的颜色？

Question

`<v-text-field
  id="loginPasswordId"
  ref="password"
  v-model="password"
  class="login-input"
  dense
  :disabled="loading"
  :hint="hello world"
  :loading="loading"
  maxlength="16"
  outlined
  :rules="[rules.required,rules.passwordLength]"
  :type="passwordShow ? 'text' : 'password'"
  @keyup.enter="submit">
</v-text-field>`

如何在 vue.js 中更改提示属性的颜色？有人帮忙吗？

Answer 1

您可以为提示添加 css 样式 class:

.v-messages__message {
    color: red !important;
}

Answer 2

您可以设置样式 .v-messages__message:

new Vue({
  el: '#demo',
  data() {
    return {
      password:''
    }
  }
})

.v-messages__message {
  color: violet;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.5.8/vuetify.min.js" integrity="sha512-4WwTDsHz4Dr/FqjqVTT4Xm9K0y/4FQDDjIzGQyKMLaYnxgjh2vyy8rTNh7QUg9pmCbBng5nnXzRlebkGMIIQQg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.5.8/vuetify.min.css" integrity="sha512-OLLHV7EvoUTcPYtFNXC73+SvDC4l/KoEd1YgNZXySxj/7XVBaHEdoqsITIgC0mJd+p1kWe/LxCR+0wCVf8LpOQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<v-text-field
  id="loginPasswordId"
  ref="password"
  v-model="password"
  class="login-input"
  dense
  hint="hello"
  loading="loading"
  maxlength="16"
  outlined
  type="passwordShow ? 'text' : 'password'"
  @keyup.enter="submit">
</v-text-field>
</div>

如何更改 vue.js 中提示属性的颜色？

How to change color of hint attribute in vue.js?

javascript

vue.js

vue-component

vuetify.js