不难，看看这个。

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

斯菲德尔

有一种新发布的叫做惰性的东西，它实际上是让浏览器忽略它。

<template>
  <input 
    type="text" 
    id="name" 
    class="form-control" 
    name="name"  
    :inert="isItInert"
  />
</template>

<script setup>
const isItInert = true
</script>

这里是测试用的操场。

您可以创建一个计算属性，并根据其值启用/禁用任何表单类型。

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>

切换输入的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>

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

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

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

我的解决方案:

// App.vue模板:

<button
            type="submit"
            class="disabled:opacity-50 w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
            :disabled="isButtonDisabled()"
            @click="sendIdentity()"
          >
            <span v-if="MYVARIABLE > 0"> Add {{ MYVARIABLE }}</span>
            <span v-else-if="MYVARIABLE == 0">Alternative text if you like</span>
            <span v-else>Alternative text if you like</span>
          </button>

风格基于顺风

// App.vue脚本:

 (...)
  methods: {
   isButtonDisabled(){
    return this.MYVARIABLE >= 0 ? undefined: 'disabled';
   }
 }

手册: vue v2 vue v3

如果isButtonDisabled的值为null、undefined或false，则 Disabled属性甚至不会被包含在被呈现的对象中 元素。