课程章节介绍
今天我们来讲一下Lightning Web Components里面的条件渲染,这个非常实用。
以前我们可能用过if:true和if:false这种写法,但现在官方已经不再推荐了,建议大家都迁移到新的指令:lwc:if、lwc:elseif和lwc:else。
它们的用法很简单,就是把指令直接绑定到一个属性上。比如lwc:if={isVisible},当isVisible这个属性的值是“真”的时候,对应的那部分界面就会显示出来;变成“假”的时候,这些元素就会从页面上直接移除掉,而不是简单隐藏。这样做的好处是,不会留下多余的DOM节点。
你可以把这些指令用在任何地方,不管是在标签里,还是在普通的HTML元素上,或者是自定义组件、基础组件都行,而且支持嵌套使用。
但要特别注意一点:lwc:elseif和lwc:else必须紧跟在lwc:if或者另一个lwc:elseif的后面,中间不能插入任何其他元素,否则就会报错。
在JavaScript里,你完全不用直接去操作DOM,就像刚才说的,只需要改变那个属性的值就行。比如把this.isVisible改成true或false,界面就会自动更新,非常方便。
还有一个小的最佳实践:如果你用来控制显示的属性是布尔类型,最好给它一个默认值false,这样一开始不显示,后面需要时再打开,切换起来很干净,也不容易出现未定义的情况。
简单总结一下就是:用新的lwc:if系列指令来替代旧的if:true,绑定属性,靠值的变化来控制元素的插入和移除,记住else/elseif必须紧跟前一个条件块,JS里只改数据不动DOM。这样写出来的代码更清晰也更高效。
关键词
LWC
Lightning Web Components
Salesforce