Vuejs布尔属性(Truthy和Falsy值)

Question

我正在阅读Vuejs文档，当我在属性绑定部分(链接到特定部分：https://vuejs.org/guide/essentials/template-syntax.html#boolean-attributes)时会感到困惑。

据我所知，在JavaScript中，空字符串 ("")被认为是falsy。

但是，在Vuejs Docs中：

<button :disabled="isButtonDisabled">Button</button> 如果isButtonDisabled具有真值，则将包含禁用的属性。如果该值是空字符串，则还将包含它，以保持与<button disabled="">的一致性。对于其他falsy值，将省略该属性。

在这里，他们将空字符串计算为一个真值！

如果有人有解释的话？这是我们应该注意的事情，或者只是Evan You (Vuejs的创建者)的一个选择，但是基于什么？

谢谢。

Answer 1

支持该属性的元素上的空字符串作为已禁用属性的值，将被解释为一个真实的值。这是HTML标准。

<input disabled />
<!-- exact equivalent of... -->
<input disabled="" />
<!-- exact equivalent of (in Vue template) -->
<input :disabled='""' />
<!-- exact equivalent of (in JSX) -->
<input disabled={""} />

当作为绑定JavaScript表达式提供时，Vue将在表达式无效时不包含该属性，除非它的计算结果为空字符串。在这种情况下，Vue将包含该属性，而不更改其值。

为什么会有警告？

因为在JavaScript中，空字符串通常被解释为falsy值，因此他们认为这是潜在的细微bug的来源。

属性的行为不是Vue团队的决定。这是W3C的决定。

所以是的，你可以说这是“正式的”。再没有比这更“正式”的了。