如果 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>