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

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

我的解决方案:

// 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属性甚至不会被包含在被呈现的对象中 元素。

若要移除禁用道具，应将其值设置为false。这需要是false的布尔值，而不是字符串'false'。

因此，如果已验证的值是1或0，则根据该值有条件地设置禁用道具。例如:

<input type="text" :disabled="validated == 1">

这里有一个例子。

var app = new Vue({ 埃尔:“#应用”, 数据:{ 禁用:0 ｝ })； < script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js " > < /脚本> < div id = "应用" > <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button> . </button @click="disabled = (disabled + 1) % 2 <input type="text":disabled="disabled == 1"> <pre>{{$data}}</pre> . {{$data} < / div >

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

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

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

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

<输入: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上面说的，你可以把你的条件逻辑放到一个方法中——这给了你更可读的代码——只是从方法中返回你想检查的条件。

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

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

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

这里是测试用的操场。