<input disabled />
    <hr />
    2 <input disabled="true" />
    <hr />
    3 <input disabled="false" />
    <hr />
    4 <input :disabled="true" />
    <hr />
    5 <input :disabled="false" />

猜一猜这5个input输入框，哪些禁用了？

正确答案如下图：

容易被误解的disabled_属性值


1,2,3,4 都禁用了，只有 5 没有禁用，你猜对了吗？

下面我们来一个个分析

<input disabled />

最最原生的html写法，通过添加 disabled 属性来禁用input输入框，此时input输入框的 disabled 属性值为true

<input disabled="true" />

此处disabled 属性值为字符串 “true” ，转换为布尔值后为 true，所以也是禁用的。

<input disabled="false" />

此处disabled 属性值为字符串 “false” ，转换为布尔值后还是 true，所以也是禁用的。

<input :disabled="true" />

: 为vue中v-bind指令的简写，表示将布尔值 true 赋值给 disabled 属性，所以禁用生效。

<input :disabled="false" />

此处为将布尔值 false 赋值给 disabled 属性，所以禁用无效！

明白了吧，-_^ ！