Set a Boolean Property Statically

今天我们来聊聊 LWC 组件里一个很常用但又特别容易踩坑的小知识点——布尔属性。 你肯定在 HTML 里见过像 disabled、checked 这样的属性吧？在标准 HTML 中，布尔属性的规则很特别：只要这个属性出现了，不管你有没有给它赋值，都表示“真”。要想表示“假”，唯一的办法就是压根不写这个属性。 LWC 里的布尔属性也严格遵守这个约定。所以，你在定义组件属性的时候，，默认值必须设成 false，。 为什么一定要这样呢？想象一下，你在 JavaScript 里把一个布尔属性的默认值设成了 true。那使用这个组件的人就惨了，因为不管他在标签里写不写这个属性，组件拿到的值永远是 true。他完全没办法在页面上静态地把它关掉——因为默认就是 true，加上属性还是 true，不加属性也是 true，这条路就堵死了。 所以，正确的做法是，把默认值设成 false。当别人想把它打开，也就是设为 true 的时候，只需要在组件标签上加上这个属性名，后面不用写任何值。比如你写一个 ``，这就表示 show 的值是 true。 这里要特别注意一个非常常见的错误：千万不要写成 `show="false"`。你可能会觉得，我明明写了 false 啊，但其实在 HTML 布尔属性的世界里，只要属性出现了，不管它的值是什么，都算 true。而且 `"false"` 在 JavaScript 里是一个非空字符串，这本身也是个“真值”，所以你会得到一个你意想不到的 true。 另外还有一个小细节，当 show 为 true 的时候，这个属性并不会自动出现在最终渲染出来的 HTML 元素上，除非你手动去调用 setProperty 把它反映到 DOM 上。这也是 LWC 的一种优化机制。 简单总结一下： - 默认值永远设成 false。 - 想打开属性，标签上加属性名就行，别写值。 - 千万不要写 `show="false"`，它其实是 true。 - 属性为 true 时，不一定会在 HTML 上显示出来。 记住这几点，你就能绕开 LWC 布尔属性大部分的坑了。我们下一节继续聊。