To render the block based on condition use if attribute with an expression. The block will be rendered only if condition is true:
<div if="$marvelous"> Viewi is marvelous! </div>
Will result to:
<div> Viewi is marvelous! </div>
You can extend conditional rendering by using else-if attribute with an expression. The block will be rendered only if the condition is true and previous if or else-if blocks are false:
<div if="$weather == 'sunny'"> It is nice and sunny outside today. </div> <div else-if="$weather == 'rainy'"> Oh no, it is raining again. </div>
Will result to:
<div> Oh no, it is raining again. </div>
Please note: else-if block should be right after another if or else-if block.
Of course you can also have else conditional block. The block will be rendered only if all the previous conditions are false:
<div if="$weather == 'sunny'"> It is nice and sunny outside today. </div> <div else-if="$weather == 'rainy'"> Oh no, it is raining again. </div> <div else> Take an umbrella in case it may rain. </div>
Will result to:
<div> Take an umbrella in case it may rain. </div>
Please note: else block should be right after another if or else-if block.
You can group a couple of elements into one conditional block by using template. Useful when you want to render some text or group of elements based on condition:
<template if="$show"> Just text </template> <template if="$open"> <h1>Title</h1> <div>Message</div> <p>Content</p> </template>
Will result to:
Just text <h1>Title</h1> <div>Message</div> <p>Content</p>