如果在 Vue.js 中禁用输入，则更改背景颜色

Question

刚开始使用 Vue.js，有很多东西要学。 我想在禁用输入时更改背景颜色，因为计算函数返回 true。我似乎无法让它工作。

这是我的导出默认值

computed: {
  disableField () {
    if (condition) return true
  }
}

这是在我的模板中

<input
  :class="{ disableInput: disableField }"
  :disabled="disableField"
/>

这是在我的 CSS 中

.disable-input {
  background-color: gray;
}

当计算函数返回 true 时，它​​会禁用该字段，但不会更改背景颜色。

Answer 1

正如@dziraf 指出的那样，您的班级名称是'disable-input'，因此将其更改为:class="{'disable-input': disabled}"，那么应该可以正常工作。

或者如果这个输入只绑定这个类，使用:class="disabled ? 'disable-input' : ''"是另一种解决方案。

或者您可能想使用 css 选择器来实现相同的目标，例如：

input:disabled { background-color:red; }

以下是一个演示：

new Vue({
  el: '#app',
  data () {
    return {
      disabled: true
    }
  }
})

input:disabled {
  background-color:red;
}

input.disable-input {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <button @click="disabled=!disabled">Toggle {{disabled}}</button>
  <input :disabled="disabled" :value="'abc'">
  <input :disabled="disabled" :value="'abc'" :class="{'disable-input': disabled}">
  <input :disabled="disabled" :value="'abc'" :class="disabled ? 'disable-input' : ''">
</div>

Answer 2

更正了下面的语法。用引号将您的班级名称括起来。：

<input
  :class="{ 'disableInput': disableField }"
  :disabled="disableField"
/>