在本 Vue.js 教程中,我们将展示如何有条件地禁用 Vue.js 组件中的 HTML 输入。
要删除禁用的道具,我们应该将其值设置为 false,它需要是布尔值,而不是字符串。
如果我们需要在 false 的情况下禁用输入,否则应该启用和可编辑。
让我们考虑一下这个案例。
如果validated 的值是1 或者0,那么我们应该根据该值有条件地设置disabled prop:
<input type="text" :disabled="validated == 1">
这是完整的示例:
<!DOCTYPE html> <html> <head> <title>Disable input in Vue.js</title> </head> <body> <div id="app"> <button @click="disabled = (disabled + 1) % 2">Switch</button> <input type="text" :disabled="disabled == 1" /> <pre>{{ $data }}</pre> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script> new Vue({ el: "#app", data: { disabled: 0 } }); </script> </body> </html>
日期:2020-06-02 22:17:24 来源:oir作者:oir