Initializing help system before first use

Working with Conditional VDL Attributes

You can implement conditional logic by combining expressions with one of a number of conditional VDL attributes. This is generally used to control whether content is included in the page or not, whether it is hidden, or how it is styled.

Any valid VDL expression can be used with a conditional VDL attribute as long as it evaluates to a value that can be interpreted as true or false.

The vdl-if Conditional

This attribute determines if an element and its child elements are actually present in the rendered view. 
<div vdl-if="=scenario.entities.boolScalar.value">
  <h1>Optimal return</h1>
</div>
Above, the <div> and <h1> elements will only be shown if the value of the boolScalar scalar is true.
The example below illustrates vdl-if used on a VDL tag, and that more complex expressions than simple booleans can be used. 
<vdl-section vdl-if="=scenarios.length > 1">
	...
</vdl-section>
vdl-if expressions are evaluated once all page data is loaded, and the conditional content is not included until the evaluation.
A side-effect of this is that adding a vdl-if condition with a simple value of true will hide content until the view data is ready, which can be useful in avoiding the partial rendering of a page. 
<div vdl-if="=true">
		I am visible when the data for this view is loaded.
</div>

The vdl-visible Conditional

This is similar to vdl-if except that the element it is placed upon - and its children - are never removed from the view. When supplied with an expression which evaluates to false, vdl-visible applies a style that causes the element to not be displayed.

The difference from vdl-if is that the affected elements are still in the view DOM and can be manipulated even while not visible. This is important when there are sections of the view that need to be kept up-to-date even when they are perhaps not visible.

The vdl-css Conditional

This attribute is similar to vdl-if and vdl-visible. It adds CSS classes to the element on which it is attached if the expression evaluates to truthy. It is different from vdl-if and vdl-visible in that it takes an object as a value.

The example below uses vdl-css to add a CSS class called danger if the scalar entity boolValue is true in the first instance, and to add the error class when there are no scenarios selected. 
<div vdl-css="={danger: scenario.entities.boolValue.value, error: scenarios.length===0">
		...
</div>
In each case, the key entry in the object is the name of the class to add, and each value is an expression that evaluates to true or false.
Parent Topic Using VDL Expressions