如果你使用SFC，并想要一个最小的例子，这将是你如何使用它:

导出默认值{ 数据(){ 返回{ disableInput:假 ｝ }， 方法:{ toggleInput () { 这一点。this.disableInput = ｝ ｝ ｝ <模板> < div > <input type="text":disabled="disableInput"> <button @click="toggleInput">切换输入</button> < / div > < /模板>

单击该按钮会触发toggleInput函数，并简单地用它来切换disableInput的状态。this.disableInput = !

当我们想要禁用输入时，通过将禁用道具设置为条件，我们可以在Vue 3中有条件地禁用输入

例如，我们可以这样写:

<template>
  <input :disabled="disabled" />
  <button @click="disabled = !disabled">toggle disable</button>
</template>


<script>
export default {
  name: "App",
  data() {
    return {
      disabled: false,
    };
  },
};
</script>

可以使用此添加条件。

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>

禁用属性需要一个布尔值:

<输入:disabled=“验证”/>

注意我如何只检查是否验证-这应该工作为0是假的

0在JS中被认为是假的(如undefined或null)

1实际上被认为是正确的

要格外小心，试试: <禁用输入:= " ! !验证" / >

这种双重否定将0或1的假值或真值转换为假值或真值

不相信我?进入控制台，输入!!0或!!1: -)

此外，为了确保你的数字1或0绝对是一个数字，而不是字符串'1'或'0'，你正在检查的值前面有一个+ e.g. <input:disabled="!! "+validated"/>将一个数字字符串转换为数字

+1 = 1 +'1' = 1 就像David Morrow上面说的，你可以把你的条件逻辑放到一个方法中——这给了你更可读的代码——只是从方法中返回你想检查的条件。

试试这个

 <div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> Click me to enable
    </label>
  </p>
  <input :disabled='isDisabled'></input>
</div>

js角度

new Vue({
  el: '#app',
  data: {
    terms: false
  },
  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }
})

切换输入的disabled属性非常复杂。对我来说，问题有两方面:

(1)记住:输入的“disabled”属性不是一个布尔属性。 属性的存在意味着输入被禁用。

然而，Vue.js的创建者已经准备了这个… https://v2.vuejs.org/v2/guide/syntax.html#Attributes

(感谢@connexo…如何在vuejs输入文本中添加禁用属性?)

(2)此外，还有一个DOM时间重新渲染的问题，我有。当我试图切换回来时，DOM没有更新。

在某些情况下，“组件不会立即重新渲染。它将在下一个‘滴答’中更新。”

来自Vue.js文档:https://v2.vuejs.org/v2/guide/reactivity.html

解决方案是:

this.$nextTick(()=>{
    this.disableInputBool = true
})

更完整的工作流示例:

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>