https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_directives
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_conditional
Demo.html
<template> <template if:true={testVariable}> show true </template> <template if:false={testVariable}> show false </template> </template>
Demo.js
import { LightningElement, track, wire } from 'lwc'; export default class demo extends LightningElement { get testVariable( { console.log('execute this'; return true; } }
当系统解析 if:true / if:false时，会调用这个变量的get方法，并且不管 if:true还是 if:false，都会执行，所以上述的demo中，console的内容为执行两次。
1. lwc:if 如果搭配 lwc:elseif以及lwc:else情况下，变量只会调用一次，然而 if:true/if:false每次都需要调用变量 get方法；
2. Lwc:if可以用于好多的元素上，比如 template / div / 自定义lwc组件等，if:true仅能用于 template上；
3. Lwc:if支持 lwc:elseif这种多层级判定，if:true / if:false只支持两层；
4. 不能在lwc:elseif或lwc:else之前添加文本或其他元素, if:true 和 if:false是允许的。
注：目前 lwc:if只能用于sandbox，现在是 sandbox preview阶段，后续正式release以后，dev开发环境才允许使用。
demo.html：demo中使用 lwc:if / elseif作为一个demo，我们可以看到组件中使用的是 h2而不是template，因为 lwc:if支持在这些html标签中使用。
<template> <h2 lwc:if={renderedWrapper.section1}> show section1 </h2> <h2 lwc:elseif={renderedWrapper.section2}> show section2 </h2> <h2 lwc:elseif={renderedWrapper.section3}> show section3 </h2> <h2 lwc:elseif={renderedWrapper.section4}> show section4 </h2> <lightning-button-group> <lightning-button label="Show section1" value="section1" onclick={handleButtonEvent}></lightning-button> <lightning-button label="Show section2" value="section2" onclick={handleButtonEvent}></lightning-button> <lightning-button label="Show section3" value="section3" onclick={handleButtonEvent}></lightning-button> <lightning-button label="Show section4" value="section4" onclick={handleButtonEvent}></lightning-button> </lightning-button-group> </template>
demo.js
import { LightningElement, track, wire } from 'lwc'; export default class demo extends LightningElement { @track renderedWrapper = { section1 : false, section2 : false, section3 : false, section4 : false }; handleButtonEvent(event { if(event.target.value === 'section1' { this.renderedWrapper.section1 = true; this.renderedWrapper.section2 = false; this.renderedWrapper.section3 = false; this.renderedWrapper.section4 = false; } else if(event.target.value === 'section2' { this.renderedWrapper.section1 = false; this.renderedWrapper.section2 = true; this.renderedWrapper.section3 = false; this.renderedWrapper.section4 = false; } else if(event.target.value === 'section3' { this.renderedWrapper.section1 = false; this.renderedWrapper.section2 = false; this.renderedWrapper.section3 = true; this.renderedWrapper.section4 = false; } else if(event.target.value === 'section4' { this.renderedWrapper.section1 = false; this.renderedWrapper.section2 = false; this.renderedWrapper.section3 = false; this.renderedWrapper.section4 = true; } } }
尽管官方说有可能删除，我不建议直接废除，因为 lwc:if尽管优化了速度，直接替换还是有一些局限性。我们看下述的例子
<template>
<template if:true={testVariable}>
show true
</template>
<br/>
test show other information
<br/>
<template if:false={testVariable}>
show false
</template>
</template>
下述的demo，如果按照官方的建议，就很麻烦，无法直接将 if:true和 if:false 替换成 lwc:if以及lwc:else，以下是错误案例
<template> <template lwc:if={testVariable}> show true </template> <br/> test show other information <br/> <template lwc:else> show false </template> </template>
上述代码是错误案例，部署是会报错：'lwc:else' directive must be used immediately after an element with 'lwc:if' or 'lwc:elseif'
总结：虽然 lwc:if增加了很多的灵活性，但是不建议官方直接将 if:true弃用或者直接删除，否则对既有系统影响还是过大。篇中有错误地方欢迎指出，有不懂欢迎留言，有不同看法的小伙伴欢迎讨论。