无涯教程网

Vue.js 如何有条件地更改 vuevuetify 文本字段 colored颜色

发布于03月01日

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

有办法得到我想要的吗？

推荐答案

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

Vue.js相关问答推荐

Vue路由路径匹配行为

如何使用 vueJS 上的 ref( ) 函数创建二维数组定义？

如何在 Vuetify 2 中的轮播项目上放置 href 属性？

Vuejs 通过数据键迭代复杂对象

Vue 3 / Vuetify 3：如何为按钮设置全局默认 colored颜色

Vuex Mutations 和 Airbnb eslint

Vuex 和 Event Bus 有什么区别？

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

动态插入字符串上的 Vue 事件处理程序不起作用

apache上的Vue-router，子目录下的SPA，只能通过重定向访问页面

Vue @click 不适用于存在 href 的anchor锚标记

即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误

Vuetify 单选按钮未显示为选中状态

在 vue/vuex(/flux？) 中使用 ES6 类是一种反模式吗？

我可以避免使用 Vue.js 组件的重复样式吗？

VueJS 通过渲染传递数据

Vue-i18n '无法读取 Proxy.Vue.$t 处未定义的属性 '_t'

如何确定 Vue 何时完成更新 DOM？

是否有 v-cloak 逆？

返回 VueJS 方法的Native Code消息

实用课程推荐

相关教程推荐