容易被误解的disabled

最新推荐文章于 2024-07-22 23:55:52 发布

朝阳39

最新推荐文章于 2024-07-22 23:55:52 发布

阅读量1k

点赞数 1

分类专栏： # HTML # Vue # 已归档链接文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_41192489/article/details/121801331

版权

已归档链接同时被 3 个专栏收录

280 篇文章

订阅专栏

Vue

153 篇文章

订阅专栏

HTML

24 篇文章

订阅专栏

"本文详细讲解了如何在HTML、Vue和JavaScript中设置input元素的disabled属性，揭示了不同语法下禁用状态的实现，并重点指出：所有原生HTML和Vue中的：disabled="true"均使输入框禁用，而JavaScript中仅：disabled=false时有效。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

猜一猜这5个input输入框，哪些禁用了？
正确答案如下图：
在这里插入图片描述
1,2,3,4 都禁用了，只有 5 没有禁用，你猜对了吗？
下面我们来一个个分析

 1 <input disabled />

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

   2 <input disabled="true" />

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

    3 <input disabled="false" />

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

    4 <input :disabled="true" />

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

    5 <input :disabled="false" />

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

明白了吧，-_^ ！