vue.js - 如果在 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}"，那么应该可以正常工作。

或者如果此输入仅绑定(bind)此类，则使用 :class="disabled ? 'disable-input' : ''" 是另一种解决方案。

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

输入:禁用{ 背景颜色:红色； }

下面是一个演示:

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>