vue.js有条件地禁用输入

7 回答

• 15

  要删除已禁用的prop，应将其值设置为 false . 这需要是 false 的布尔值，而不是字符串 'false' .

  因此，如果 validated 的值为1或0，则根据该值有条件地设置 disabled prop . 例如 . ：

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

  Here is an example .

  回复于 2024-05-09T14:31:53+08:00
• 257

  你可以有一个计算属性，它返回一个布尔值，取决于你需要的标准 .

  <input type="text" :disabled=isDisabled>
  

  然后把你的逻辑放在计算属性中......

  computed: {
    isDisabled() {
      // evaluate whatever you need to determine disabled here...
      return this.form.validated;
    }
  }
  

  回复于 2024-05-09T14:31:53+08:00
• 33

  不难，检查一下 .

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

  jsfiddle

  回复于 2024-05-09T14:31:53+08:00
• 5

  您的disabled属性需要一个布尔值：

  <input :disabled="validated" />

  注意我是如何只检查 validated - 这应该作为 0 is falsey ...例如

  0 is considered to be false in JS (like undefined or null)

  1 is in fact considered to be true

  要格外小心，试试： <input :disabled="!!validated" />

  这个双重否定将 falsey 或 truthy 的 0 或 1 的值变为 false 或 true

  不相信我？进入你的控制台并输入 !!0 或 !!1 :-)

  另外，为了确保您的号码 1 或 0 绝对是作为数字而不是字符串 '1' 或 '0' 预先挂起您正在检查的值 + 例如 <input :disabled="!!+validated"/> 这会将数字的字符串转换为数字，例如

  +1 = 1 +'1' = 1 就像David Morrow上面所说的那样，你可以将你的条件逻辑放入一个方法中 - 这会给你更多 readable 代码 - 只需返回你要检查的条件的方法 .

  回复于 2024-05-09T14:31:53+08:00
• 9

  您可以在 vue.js 中操纵 :disabled 属性 .

  它将接受一个布尔值，如果它是 true ，则输入被禁用，否则它将被启用...

  在你的情况下像下面这样结构的东西，例如：

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

  另请阅读以下内容：

  通过JavaScript表达式有条件地禁用输入元素您可以使用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>
  

  回复于 2024-05-09T14:31:53+08:00
• 3

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

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

  回复于 2024-05-09T14:31:53+08:00
• 1

  可以使用此添加条件 .

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

  回复于 2024-05-09T14:31:53+08:00