Question

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

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

Answer 1

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

Answer 2

您可以有条件地绑定这样的类：

:class="myModel.someBool ? 'red--text' : ''"

Answer 3

您最好从data（）设置实际的类

data: function () {
        return {
            testClass: 'red--text'
        }
    }

并将您的文本字段类绑定到该值:class="testClass"

然后方法会改变整个类

methods: {    
        uploader() {
            this.testClass = 'primary--text'
        }
    }

Answer 4

您可以使用带有三元条件的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/>

注意-您不能使用颜色来更改文字。和突出显示框颜色，以及是否使用背景色代替边框可以更改整个字段的颜色。

Answer 5

您也可以使用方法

<template>
  <div>
    <v-btn text :color="tabColor(1)" @click="selectTab(1)">Tab 1</v-btn>
    <v-btn text :color="tabColor(2)" @click="selectTab(2)">Tab 2</v-btn>
  </div>
</template>

<script>

export default {
  data() {
    return {
      currentTab: 1
    };
  },
  methods: {
    selectTab(tab) {
      this.currentTab = tab;
    },
    tabColor(tab) {
      return tab == this.currentTab ? "primary" : "normal";
    },
  },
};

</script>

如何有条件地更改Vue / Vuetify文本字段颜色

5 个答案: