这个也可以

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="!validated">

你可以在vue.js中操作:disabled属性。

它将接受一个布尔值，如果它为真，则输入被禁用，否则将启用…

以你的例子为例，结构如下:

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">

同时阅读下面这篇文章:

通过JavaScript有条件地禁用输入元素 你可以有条件地inline禁用输入元素 JavaScript表达式。这种紧凑的方法提供了一个快速的 应用简单条件逻辑的方法。例如，如果你只需要 要检查密码的长度，您可以考虑采取一些措施 像这样。

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

可以使用此添加条件。

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

若要移除禁用道具，应将其值设置为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 >

我的解决方案:

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

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

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

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

这里是测试用的操场。