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"
/>

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

2 个答案: